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 { Inter } from 'next/font/google';
import { mapFileSlugToTranslated } from '@/lib/slugs';
import { cookies } from 'next/headers';
import { TransitionProvider } from '@/components/providers/TransitionProvider';
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
const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
const cookieStore = await cookies();
const hasSeenLoader = cookieStore.has('etib_initial_load');
return (
<html
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.gstatic.com" crossOrigin="anonymous" />
<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>
<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}>
<TransitionProvider>
<InitialLoader />
<InitialLoader shouldShowLoader={!hasSeenLoader} />
<PageTransitionShutter />
<SkipLink />
<Header navLinks={navLinks} />

23
components/providers/InitialLoader.tsx
View File

@@ -7,20 +7,12 @@ const PRELOAD_VIDEOS = [
'/assets/videos/web/hero-bohrung.mp4'
];
export function InitialLoader() {
const [isLoading, setIsLoading] = useState(true);
const [isClient, setIsClient] = useState(false);
export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?: boolean }) {
const [isLoading, setIsLoading] = useState(shouldShowLoader);
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
const timeout = setTimeout(() => {
finishLoading();
@@ -48,15 +40,16 @@ export function InitialLoader() {
// Cleanup
return () => clearTimeout(timeout);
}, []);
}, [shouldShowLoader]);
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);
};
// Wir rendern serverseitig nichts blockierendes (Hydration Mismatch verhindern)
if (!isClient) return null;
// Wenn wir serverseitig rendern und es nicht zeigen sollen, return null
if (!shouldShowLoader) return null;
return (
<AnimatePresence>