denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(consent): prevent hydration mismatch + banner flash

Browse Source 
Do not decide consent during SSR. Read consent cookie after mount and only render the banner once consent is loaded, avoiding both hydration errors and the brief banner flash on reload.

Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
Cursor Agent
2026-01-14 21:55:35 +00:00
parent b1a314b8a8
commit a56ec97ef9
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/ConsentBanner.tsx
View File

@@ -5,12 +5,14 @@ import { useConsent, type ConsentState } from "./ConsentProvider";
import { useTranslations } from "next-intl";
export default function ConsentBanner() {
const { consent, setConsent } = useConsent();
const { consent, ready, setConsent } = useConsent();
const [draft, setDraft] = useState<ConsentState>({ analytics: false, chat: false });
const [minimized, setMinimized] = useState(false);
const t = useTranslations("consent");
const shouldShow = consent === null;
// Avoid hydration mismatch + avoid "flash then disappear":
// Only decide whether to show the banner after consent has been read client-side.
const shouldShow = ready && consent === null;
if (!shouldShow) return null;
const s = {