feat(fix-sw): add countdown timer and icon to Reload Now button

Button now shows a live countdown (7→0s) so users can see exactly when
the auto-reload will fire, with a RefreshCw icon per button UX standard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-06-24 12:53:39 -04:00
parent 826e448af7
commit 6449d27696

View File

@@ -1,9 +1,11 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { RefreshCw } from '@lucide/svelte';
let status: string[] = $state([]); let status: string[] = $state([]);
let done = $state(false); let done = $state(false);
let has_error = $state(false); let has_error = $state(false);
let countdown = $state(7);
const origin = typeof window !== 'undefined' ? window.location.origin : ''; const origin = typeof window !== 'undefined' ? window.location.origin : '';
function log(msg: string) { function log(msg: string) {
@@ -128,11 +130,15 @@ async function nuke_everything() {
log(`ERROR clearing sessionStorage: ${err.message}`); log(`ERROR clearing sessionStorage: ${err.message}`);
} }
log('─── Reset complete. Reloading in 3 seconds... ───'); log('─── Reset complete. Reloading in 7 seconds... ───');
done = true; done = true;
// Auto-reload after a short pause so the user can read the log const tick = setInterval(() => {
await new Promise((r) => setTimeout(r, 3000)); countdown -= 1;
if (countdown <= 0) clearInterval(tick);
}, 1000);
await new Promise((r) => setTimeout(r, 7000));
window.location.href = '/'; window.location.href = '/';
} }
@@ -179,9 +185,10 @@ onMount(() => {
: 'Reset complete! Reloading to home page...'} : 'Reset complete! Reloading to home page...'}
</p> </p>
<button <button
class="ml-auto rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700" class="ml-auto flex items-center gap-2 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
onclick={() => (window.location.href = '/')}> onclick={() => (window.location.href = '/')}>
Reload Now <RefreshCw size={14} />
Reload Now ({countdown}s)
</button> </button>
</div> </div>
{/if} {/if}