Improve pending state with clearer messages

web/src/lib/components/PendingState.svelte

@@ -8,9 +8,10 @@
 
     interface Props {
         test: Test;
+        fetching?: boolean;
     }
 
-    let { test, nbfetch, nextfetch }: Props = $props();
+    let { test, nbfetch, nextfetch, fetching = false }: Props = $props();
 
     let lastForcedCheck = $state(Date.now() - 12345);
     function forceCheck() {
@@ -36,17 +37,23 @@
 
                 <div class="alert alert-info mb-4" role="alert">
                     <i class="bi bi-lightbulb me-2"></i>
+                    {#if nbfetch > 4}
+                        <strong>Tip:</strong> Check your mail is not stuck in the sending box.
+                    {:else}
                         <strong>Tip:</strong> Send an email that represents your actual use case (newsletters,
                         transactional emails, etc.) for the most accurate results.
+                    {/if}
                 </div>
 
                 <div class="d-flex align-items-center justify-content-center gap-2 text-muted">
                     <div class="spinner-border spinner-border-sm" role="status"></div>
-                    {#if nextfetch}
+                    {#if fetching || nextfetch === 0}
+                        <small>Looking for new email...</small>
+                    {:else if nextfetch}
                         <div>
-                            <small
+                            <small>
-                                >Next inbox check in {nextfetch} second{#if nextfetch > 1}s{/if}...</small
+                                Next inbox check in {nextfetch} second{#if nextfetch > 1}s{/if}...
-                            >
+                            </small>
                             {#if nbfetch > 0}
                                 <button
                                     type="button"

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

@@ -25,6 +25,7 @@
     let nextfetch = $state(23);
     let nbfetch = $state(0);
     let menuOpen = $state(false);
+    let fetching = $state(false);
 
     async function fetchTest() {
         if (nbfetch > 0) {
@@ -32,6 +33,10 @@
         }
         nbfetch += 1;
 
+        // Set fetching state and ensure minimum 500ms display time
+        fetching = true;
+        const startTime = Date.now();
+
         try {
             const testResponse = await getTest({ path: { id: testId } });
             if (testResponse.data) {
@@ -50,6 +55,16 @@
             error = err instanceof Error ? err.message : "Failed to fetch test";
             loading = false;
             stopPolling();
+        } finally {
+            // Ensure fetching state is displayed for at least 500ms
+            const elapsed = Date.now() - startTime;
+            if (elapsed < 500) {
+                setTimeout(() => {
+                    fetching = false;
+                }, 500 - elapsed);
+            } else {
+                fetching = false;
+            }
         }
     }
 
@@ -151,7 +166,13 @@
         </div>
     {:else if test && test.status !== "analyzed"}
         <!-- Pending State -->
-        <PendingState {nextfetch} {nbfetch} {test} on:force-inbox-check={() => fetchTest()} />
+        <PendingState
+            {nextfetch}
+            {nbfetch}
+            {test}
+            {fetching}
+            on:force-inbox-check={() => fetchTest()}
+        />
     {:else if report}
         <!-- Results State -->
         <div class="fade-in">
@@ -198,7 +219,12 @@
                             </div>
                         </div>
                     </div>
-                    <ScoreCard grade={report.grade} score={report.score} summary={report.summary} {reanalyzing} />
+                    <ScoreCard
+                        grade={report.grade}
+                        score={report.score}
+                        summary={report.summary}
+                        {reanalyzing}
+                    />
                 </div>
             </div>