Update

frontend/src/components/ResultsPanel.tsx

@@ -44,23 +44,8 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
     }
   };
 
-  if (isLoading) {
-    return ( 
-      <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center justify-center"> 
-        <Loader2Icon className="w-10 h-10 text-blue-600 animate-spin mb-3" /> 
-        <p className="text-teal-700 font-medium">Analysing Image...</p> 
-      </div>
-    );
-  }
-
-  if (!result) {
-    return ( 
-      <div className="bg-white rounded-lg shadow-sm p-6 text-center text-gray-500">
-        No analysis result available yet. 
-      </div>
-    );
-  }
-
+  // Safely destructure result (keep undefined values when result is null) so we can render
+  // a stable panel while loading and avoid early returns that change layout.
   const {
     model_used,
     detections,
@@ -68,31 +53,40 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
     summary,
     // prediction (not used here)
     confidence,
-  } = result;
+  } = (result || {}) as any;
 
   
 
-  return ( <div className="bg-white rounded-lg shadow-sm p-6">
-    {/* Header */} 
-    <div className="flex items-center justify-between mb-6"> 
-      <div> 
-        <h2 className="text-2xl font-bold text-gray-800">
-          {model_used || "Analysis Result"} 
-        </h2> 
-        <p className="text-sm text-gray-500">Automated Image Analysis</p> 
-      </div>
+  return (
+    <div className="bg-white rounded-lg shadow-sm p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">
+            {model_used || "Analysis Result"}
+          </h2>
+          <p className="text-sm text-gray-500">Automated Image Analysis</p>
+        </div>
 
-      {/* header actions intentionally empty; Generate Report button moved below analysis details */}
-    </div>
+        {/* header actions intentionally empty; Generate Report button moved below analysis details */}
+      </div>
 
-    {/* Image */}
-    <div className="relative mb-6 rounded-lg overflow-hidden border border-gray-200">
-      <ImageWithFallback
-        src={annotated_image_url || uploadedImage || "/ui.jpg"}
-        alt="Analysis Result"
-        className="w-full h-64 object-cover"
-      />
-    </div>
+      {/* If we're loading, show a centered loader inside the panel */}
+      {isLoading ? (
+        <div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center justify-center"> 
+          <Loader2Icon className="w-10 h-10 text-blue-600 animate-spin mb-3" /> 
+          <p className="text-teal-700 font-medium">Analysing Image...</p> 
+        </div>
+      ) : (
+        // Image
+        <div className="relative mb-6 rounded-lg overflow-hidden border border-gray-200">
+          <ImageWithFallback
+            src={annotated_image_url || uploadedImage || "/ui.jpg"}
+            alt="Analysis Result"
+            className="w-full h-64 object-cover"
+          />
+        </div>
+      )}
 
     {/* Summary Section */}
     {summary && (