From e324e2c50819fa2ccf1bcb2654291fc935c19867 Mon Sep 17 00:00:00 2001
From: Marc Mintel
Date: Thu, 7 May 2026 19:28:10 +0200
Subject: [PATCH] fix: server-side render InitialLoader via cookies to prevent
FOUC and add video preload
Former-commit-id: 2af58c1fa51fbe807132e879995ffe75ec59b7b6
---
app/[locale]/layout.tsx | 10 +++++++++-
components/providers/InitialLoader.tsx | 23 ++++++++---------------
2 files changed, 17 insertions(+), 16 deletions(-)
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index e14fbb523..9e48c05db 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -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 (
+
+
+ {/* Preload critical hero video */}
+
-
+
diff --git a/components/providers/InitialLoader.tsx b/components/providers/InitialLoader.tsx
index f34c028ad..84bfde532 100644
--- a/components/providers/InitialLoader.tsx
+++ b/components/providers/InitialLoader.tsx
@@ -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 (