Fix coverage note flash

Author: maquchizi

components/CoverageNote.test.tsx

@@ -1,5 +1,6 @@
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { renderToString } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { CoverageNote } from "./CoverageNote";
 
@@ -14,6 +15,12 @@ afterEach(() => {
 });
 
 describe("CoverageNote", () => {
+  it("stays hidden in the initial render until storage has been checked", () => {
+    localStorage.setItem(STORAGE_KEY, String(Date.now() + 60_000));
+
+    expect(renderToString(<CoverageNote retentionDays={14} />)).toBe("");
+  });
+
   it("renders nothing when retention is unlimited", () => {
     const { container } = render(<CoverageNote retentionDays={null} />);
     expect(container).toBeEmptyDOMElement();

components/CoverageNote.tsx

@@ -32,7 +32,10 @@ export function CoverageNote({
 }: {
   retentionDays: number | null;
 }) {
-  const [visible, setVisible] = useState(true);
+  // Storage is unavailable during SSR, so stay hidden until the client has
+  // checked whether a remembered dismissal is still active. This prevents a
+  // dismissed notice from flashing during hydration.
+  const [visible, setVisible] = useState(false);
 
   useEffect(() => {
     if (retentionDays == null) return;
@@ -47,6 +50,7 @@ export function CoverageNote({
     } catch {
       // localStorage unavailable (private mode, etc.) — fall through to auto-hide.
     }
+    setVisible(true);
     const timer = setTimeout(() => setVisible(false), AUTO_HIDE_MS);
     return () => clearTimeout(timer);
   }, [retentionDays]);