marcel/familienarchiv
1
0
Fork 0
Code Issues 103 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ocr): fix SSE retry to actually reconnect EventSource

Browse Source 
The retry button set status='running' but didn't re-trigger the $effect
because jobId hadn't changed. Added retryCount state so the effect
re-runs and creates a fresh EventSource on retry. Also added aria-label
to the progress bar for accessibility.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-13 12:28:40 +02:00
parent dd47a48d90
commit 8c07779a91
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/lib/components/OcrProgress.svelte
View File

@@ -13,10 +13,12 @@ let processed: number = $state(0);
let total: number = $state(0); let total: number = $state(0);
let currentPage: number = $state(0); let currentPage: number = $state(0);
let totalPages: number = $state(0); let totalPages: number = $state(0);
let retryCount: number = $state(0);
let progressPercent = $derived(total > 0 ? Math.round((processed / total) * 100) : 0); let progressPercent = $derived(total > 0 ? Math.round((processed / total) * 100) : 0);
$effect(() => { $effect(() => {
void retryCount; // track dependency to re-create EventSource on retry
const source = new EventSource(`/api/ocr/jobs/${jobId}/progress`); const source = new EventSource(`/api/ocr/jobs/${jobId}/progress`);
source.addEventListener('document', (e) => { source.addEventListener('document', (e) => {
@@ -63,6 +65,7 @@ $effect(() => {
class="h-full bg-brand-mint transition-all duration-300" class="h-full bg-brand-mint transition-all duration-300"
style="width: {progressPercent}%" style="width: {progressPercent}%"
role="progressbar" role="progressbar"
aria-label={m.ocr_progress_heading()}
aria-valuenow={progressPercent} aria-valuenow={progressPercent}
aria-valuemin={0} aria-valuemin={0}
aria-valuemax={100} aria-valuemax={100}
@@ -79,7 +82,7 @@ $effect(() => {
</h3> </h3>
<button <button
type="button" type="button"
onclick={() => { status = 'running'; }} onclick={() => { retryCount++; status = 'running'; }}
class="text-sm font-medium text-brand-navy transition-colors hover:text-brand-navy/80" class="text-sm font-medium text-brand-navy transition-colors hover:text-brand-navy/80"
> >
{m.ocr_error_retry()} {m.ocr_error_retry()}