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:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user