Indicate when the next inbox check will be done

web/src/lib/components/PendingState.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
     import type { Test } from "$lib/api/types.gen";
     import EmailAddressDisplay from "./EmailAddressDisplay.svelte";
 
+    const dispatch = createEventDispatcher();
+
     interface Props {
         test: Test;
     }
 
-    let { test }: Props = $props();
+    let { test, nbfetch, nextfetch }: Props = $props();
+
+    let lastForcedCheck = $state(Date.now() - 12345);
+    function forceCheck() {
+        lastForcedCheck = Date.now();
+        dispatch("force-inbox-check");
+    }
 </script>
 
 <div class="row justify-content-center">
@@ -32,7 +42,16 @@
 
                 <div class="d-flex align-items-center justify-content-center gap-2 text-muted">
                     <div class="spinner-border spinner-border-sm" role="status"></div>
-                    <small>Checking for email every 3 seconds...</small>
+                    {#if nextfetch}
+                        <small>Next inbox check in {nextfetch} second{#if nextfetch > 1}s{/if}...</small>
+                        {#if nbfetch > 0}
+                            <button type="button" class="btn btn-sm btn-link" onclick={forceCheck} disabled={nbfetch + Date.now() < lastForcedCheck + 10000}>
+                                <i class="bi bi-mailbox me-1"></i>Check now
+                            </button>
+                        {/if}
+                    {:else}
+                        <small>Checking for email every 3 seconds...</small>
+                    {/if}
                 </div>
             </div>
         </div>

web/src/routes/test/[test]/+page.svelte

@@ -11,8 +11,15 @@
     let loading = $state(true);
     let error = $state<string | null>(null);
     let pollInterval: ReturnType<typeof setInterval> | null = null;
+    let nextfetch = $state(23);
+    let nbfetch = $state(0);
 
     async function fetchTest() {
+        if (nbfetch > 0) {
+            nextfetch = Math.max(nextfetch, Math.floor(3 + nbfetch * 0.5));
+        }
+        nbfetch += 1;
+
         try {
             const testResponse = await getTest({ path: { id: testId } });
             if (testResponse.data) {
@@ -35,7 +42,17 @@
     }
 
     function startPolling() {
-        pollInterval = setInterval(fetchTest, 3000);
+        pollInterval = setInterval(() => {
+            nextfetch -= 1;
+
+            if (nextfetch <= 0) {
+                if (!document.hidden) {
+                    fetchTest();
+                } else {
+                    nextfetch = 1;
+                }
+            }
+        }, 1000);
     }
 
     function stopPolling() {
@@ -82,7 +99,7 @@
         </div>
     {:else if test && test.status !== "analyzed"}
         <!-- Pending State -->
-        <PendingState {test} />
+        <PendingState {nextfetch} {nbfetch} {test} on:force-inbox-check={() => fetchTest()} />
     {:else if report}
         <!-- Results State -->
         <div class="fade-in">