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.
This commit is contained in:
Viktor Barzin 2026-02-22 02:04:56 +00:00
parent 301579c255
commit 9dc011754b
No known key found for this signature in database
GPG key ID: 0EB088298288D958
2 changed files with 14 additions and 4 deletions

View file

@ -418,7 +418,7 @@ function App() {
<div className="flex-1 relative min-h-0"> <div className="flex-1 relative min-h-0">
{/* Streaming Progress Bar */} {/* Streaming Progress Bar */}
<div className="absolute top-0 left-0 right-0 z-10"> <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> </div>
{processedListingData && processedListingData.features.length > 0 ? ( {processedListingData && processedListingData.features.length > 0 ? (
@ -595,7 +595,7 @@ function App() {
<div className="flex-1 flex flex-col overflow-hidden min-h-0"> <div className="flex-1 flex flex-col overflow-hidden min-h-0">
{/* Streaming Progress Bar */} {/* Streaming Progress Bar */}
<div className="relative shrink-0"> <div className="relative shrink-0">
<StreamingProgressBar progress={streamingProgress} isLoading={isLoading} /> <StreamingProgressBar progress={streamingProgress} isLoading={isLoading} onCancel={() => abortControllerRef.current?.abort()} />
</div> </div>
{/* Map/List Container */} {/* Map/List Container */}

View file

@ -1,12 +1,13 @@
import { Loader2 } from 'lucide-react'; import { Loader2, X } from 'lucide-react';
import type { StreamingProgress } from '@/services'; import type { StreamingProgress } from '@/services';
interface StreamingProgressBarProps { interface StreamingProgressBarProps {
progress: StreamingProgress | null; progress: StreamingProgress | null;
isLoading: boolean; isLoading: boolean;
onCancel?: () => void;
} }
export function StreamingProgressBar({ progress, isLoading }: StreamingProgressBarProps) { export function StreamingProgressBar({ progress, isLoading, onCancel }: StreamingProgressBarProps) {
if (!isLoading) return null; if (!isLoading) return null;
return ( return (
@ -41,6 +42,15 @@ export function StreamingProgressBar({ progress, isLoading }: StreamingProgressB
</div> </div>
)} )}
</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>
</div> </div>
); );