From 9dc011754beb9a93cd2b247fc718974b4745df55 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Sun, 22 Feb 2026 02:04:56 +0000
Subject: [PATCH] Add cancel button to streaming progress bar

The X button aborts the in-flight fetch via AbortController,
which was already wired up but had no UI trigger. Works for
both desktop and mobile views.
---
 frontend/src/App.tsx                             |  4 ++--
 frontend/src/components/StreamingProgressBar.tsx | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5731189..bf2e353 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -418,7 +418,7 @@ function App() {
       <div className="flex-1 relative min-h-0">
         {/* Streaming Progress Bar */}
         <div className="absolute top-0 left-0 right-0 z-10">
-          <StreamingProgressBar progress={streamingProgress} isLoading={isLoading} />
+          <StreamingProgressBar progress={streamingProgress} isLoading={isLoading} onCancel={() => abortControllerRef.current?.abort()} />
         </div>
 
         {processedListingData && processedListingData.features.length > 0 ? (
@@ -595,7 +595,7 @@ function App() {
           <div className="flex-1 flex flex-col overflow-hidden min-h-0">
             {/* Streaming Progress Bar */}
             <div className="relative shrink-0">
-              <StreamingProgressBar progress={streamingProgress} isLoading={isLoading} />
+              <StreamingProgressBar progress={streamingProgress} isLoading={isLoading} onCancel={() => abortControllerRef.current?.abort()} />
             </div>
 
             {/* Map/List Container */}
diff --git a/frontend/src/components/StreamingProgressBar.tsx b/frontend/src/components/StreamingProgressBar.tsx
index fd28105..74da47c 100644
--- a/frontend/src/components/StreamingProgressBar.tsx
+++ b/frontend/src/components/StreamingProgressBar.tsx
@@ -1,12 +1,13 @@
-import { Loader2 } from 'lucide-react';
+import { Loader2, X } from 'lucide-react';
 import type { StreamingProgress } from '@/services';
 
 interface StreamingProgressBarProps {
   progress: StreamingProgress | null;
   isLoading: boolean;
+  onCancel?: () => void;
 }
 
-export function StreamingProgressBar({ progress, isLoading }: StreamingProgressBarProps) {
+export function StreamingProgressBar({ progress, isLoading, onCancel }: StreamingProgressBarProps) {
   if (!isLoading) return null;
 
   return (
@@ -41,6 +42,15 @@ export function StreamingProgressBar({ progress, isLoading }: StreamingProgressB
             </div>
           )}
         </div>
+        {onCancel && (
+          <button
+            onClick={onCancel}
+            className="p-1 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Cancel loading"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
       </div>
     </div>
   );