From f3940e7338801818da9742d0c38942a8f9823f2f Mon Sep 17 00:00:00 2001
From: Soumyadas15 <saumyadas2017@gmail.com>
Date: Tue, 27 May 2025 13:07:03 +0530
Subject: [PATCH] chore(ui): better looking browser screenshot loader

---
 .../thread/tool-views/BrowserToolView.tsx       | 17 ++++++-----------
 .../thread/tool-views/shared/ImageLoader.tsx    | 13 +++++++++++++
 2 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/thread/tool-views/shared/ImageLoader.tsx

diff --git a/frontend/src/components/thread/tool-views/BrowserToolView.tsx b/frontend/src/components/thread/tool-views/BrowserToolView.tsx
index 9fd15ce7..d1126557 100644
--- a/frontend/src/components/thread/tool-views/BrowserToolView.tsx
+++ b/frontend/src/components/thread/tool-views/BrowserToolView.tsx
@@ -19,6 +19,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
+import { ImageLoader } from './shared/ImageLoader';
 
 export function BrowserToolView({
   name = 'browser-operation',
@@ -186,9 +187,7 @@ export function BrowserToolView({
       return (
         <div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}>
           {imageLoading && (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <Skeleton className="w-full h-full min-h-[600px]" />
-            </div>
+            <ImageLoader />
           )}
           <img
             src={screenshotUrl}
@@ -213,9 +212,7 @@ export function BrowserToolView({
       return (
         <div className="flex items-center justify-center w-full h-full min-h-[600px] relative" style={{ minHeight: '600px' }}>
           {imageLoading && (
-            <div className="absolute inset-0 flex items-center justify-center">
-              <Skeleton className="w-full h-full min-h-[600px]" />
-            </div>
+            <ImageLoader />
           )}
           <img
             src={`data:image/jpeg;base64,${screenshotBase64}`}
@@ -329,13 +326,11 @@ export function BrowserToolView({
                 )}
               </div>
             )
-          ) : // For non-last tool calls, only show screenshot if available, otherwise show "No Browser State"
+          ) :
           (screenshotUrl || screenshotBase64) ? (
-            <div className="flex items-center justify-center w-full h-full max-h-[650px] overflow-auto relative">
+            <div className="flex items-center justify-center w-full h-full overflow-auto relative">
               {imageLoading && (
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <Skeleton className="w-full h-full min-h-[400px]" />
-                </div>
+                <ImageLoader />
               )}
               {screenshotUrl ? (
                 <img
diff --git a/frontend/src/components/thread/tool-views/shared/ImageLoader.tsx b/frontend/src/components/thread/tool-views/shared/ImageLoader.tsx
new file mode 100644
index 00000000..fdcbeb95
--- /dev/null
+++ b/frontend/src/components/thread/tool-views/shared/ImageLoader.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export const ImageLoader = ({ className = "" } : {className?: string}) => {
+    return (
+      <div className={`relative flex items-center justify-center h-full w-full overflow-hidden ${className}`}>
+        <div className="h-[60%] flex flex-col gap-6 aspect-square rounded-xl items-center justify-center">
+            <Skeleton className="w-full h-full rounded-lg" />
+            <Skeleton className="w-full h-14 rounded-lg" />
+            <Skeleton className="w-full h-14 rounded-lg" />
+        </div>
+      </div>
+    )
+}
\ No newline at end of file