diff --git a/Provider/frontend/src/App.svelte b/Provider/frontend/src/App.svelte index e287e02..e6f2c9c 100644 --- a/Provider/frontend/src/App.svelte +++ b/Provider/frontend/src/App.svelte @@ -74,8 +74,12 @@ return timestamp < Date.now() / 1000; } - async function fetchAll() { + let isFetching = false; + async function fetchAll(silent = false) { + if (isFetching) return; + isFetching = true; try { + if (!silent) status = "loading"; const [sys, ota, upcoming] = await Promise.all([ getSystemInfo(), getOTAStatus(), @@ -91,6 +95,8 @@ status = "error"; errorMsg = e.message || "Connection failed"; } + } finally { + isFetching = false; } } @@ -107,8 +113,8 @@ $effect(() => { fetchAll(); - // Poll for status updates every 5 seconds - const interval = setInterval(fetchAll, 5000); + // Poll for status updates every 5 seconds (silently to avoid flashing) + const interval = setInterval(() => fetchAll(true), 5000); return () => clearInterval(interval); }); diff --git a/Provider/frontend/src/lib/Spinner.svelte b/Provider/frontend/src/lib/Spinner.svelte index 7fbbf67..390f24b 100644 --- a/Provider/frontend/src/lib/Spinner.svelte +++ b/Provider/frontend/src/lib/Spinner.svelte @@ -8,16 +8,18 @@ // Subscribe to the store const unsubscribe = pendingRequests.subscribe(count => { if (count > 0) { - // Only show the spinner if the request takes longer than 300ms + // Only show the spinner if the request takes longer than 1000ms if (!timer) { timer = setTimeout(() => { showSpinner = true; - }, 300); + }, 1000); } } else { // Instantly hide the spinner when all requests finish - clearTimeout(timer); - timer = null; + if (timer) { + clearTimeout(timer); + timer = null; + } showSpinner = false; } });