viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add cancel button to streaming progress bar

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/App.tsx
View file

@ -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 */}

14
frontend/src/components/StreamingProgressBar.tsx
View file

@ -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>
);