mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix: server-side render InitialLoader via cookies to prevent FOUC and add video preload

Browse Source 
Former-commit-id: 2af58c1fa51fbe807132e879995ffe75ec59b7b6
This commit is contained in:
Marc Mintel
2026-05-07 19:28:10 +02:00
parent b515e45c0d
commit e324e2c508
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/[locale]/layout.tsx
View File

@@ -12,6 +12,7 @@ import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
import { setRequestLocale } from 'next-intl/server'; import { setRequestLocale } from 'next-intl/server';
import { Inter } from 'next/font/google'; import { Inter } from 'next/font/google';
import { mapFileSlugToTranslated } from '@/lib/slugs'; import { mapFileSlugToTranslated } from '@/lib/slugs';
import { cookies } from 'next/headers';
import { TransitionProvider } from '@/components/providers/TransitionProvider'; import { TransitionProvider } from '@/components/providers/TransitionProvider';
import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter'; import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
@@ -155,6 +156,9 @@ export default async function Layout(props: {
// Read directly from process.env — bypasses all abstraction to guarantee correctness // Read directly from process.env — bypasses all abstraction to guarantee correctness
const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true'; const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
const cookieStore = await cookies();
const hasSeenLoader = cookieStore.has('etib_initial_load');
return ( return (
<html <html
lang={safeLocale} lang={safeLocale}
@@ -165,11 +169,15 @@ export default async function Layout(props: {
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link rel="preconnect" href="https://img.infra.mintel.me" /> <link rel="preconnect" href="https://img.infra.mintel.me" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
{/* Preload critical hero video */}
<link rel="preload" as="video" href="/assets/videos/web/hero-bohrung.mp4" type="video/mp4" />
</head> </head>
<body className="flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white"> <body className="flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white">
<NextIntlClientProvider messages={clientMessages} locale={safeLocale}> <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
<TransitionProvider> <TransitionProvider>
<InitialLoader /> <InitialLoader shouldShowLoader={!hasSeenLoader} />
<PageTransitionShutter /> <PageTransitionShutter />
<SkipLink /> <SkipLink />
<Header navLinks={navLinks} /> <Header navLinks={navLinks} />

23
components/providers/InitialLoader.tsx
View File

@@ -7,20 +7,12 @@ const PRELOAD_VIDEOS = [
'/assets/videos/web/hero-bohrung.mp4' '/assets/videos/web/hero-bohrung.mp4'
]; ];
export function InitialLoader() { export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(shouldShowLoader);
const [isClient, setIsClient] = useState(false);
useEffect(() => { useEffect(() => {
setIsClient(true); if (!shouldShowLoader) return;
// Prüfen, ob wir in dieser Session schon geladen haben
const hasLoaded = sessionStorage.getItem('etib_initial_load');
if (hasLoaded) {
setIsLoading(false);
return;
}
// Fallback Timeout (4 Sekunden), falls Videos hängen // Fallback Timeout (4 Sekunden), falls Videos hängen
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
finishLoading(); finishLoading();
@@ -48,15 +40,16 @@ export function InitialLoader() {
// Cleanup // Cleanup
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}, []); }, [shouldShowLoader]);
const finishLoading = () => { const finishLoading = () => {
sessionStorage.setItem('etib_initial_load', 'true'); // Set a session cookie so the server knows not to render the loader again
document.cookie = "etib_initial_load=true; path=/; samesite=lax";
setIsLoading(false); setIsLoading(false);
}; };
// Wir rendern serverseitig nichts blockierendes (Hydration Mismatch verhindern) // Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
if (!isClient) return null; if (!shouldShowLoader) return null;
return ( return (
<AnimatePresence> <AnimatePresence>