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

fix(lcp): revert DynamicFramerMotion wrapper to prevent React 18 Suspense DOM deletion during hydration
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 30s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🏗️ Build (push) Has been skipped
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 3s
Details
Build & Deploy / 🧪 QA (push) Failing after 48s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-07-01 12:10:15 +02:00
parent 067e34c19b
commit e8adb87b02
4 changed files with 24 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,6 @@ import { DynamicMobileBottomNav as MobileBottomNav } from '@/components/layout/D
import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground'; import { DynamicCorporateBackground as CorporateBackground } from '@/components/decorations/DynamicCorporateBackground';
import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter'; import { DynamicPageTransitionShutter as PageTransitionShutter } from '@/components/providers/DynamicPageTransitionShutter';
import { DynamicFramerMotion as FramerMotionProvider } from '@/components/providers/DynamicFramerMotion';
const inter = Inter({ const inter = Inter({
subsets: ['latin'], subsets: ['latin'],
@@ -191,28 +190,26 @@ export default async function Layout(props: {
<body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white" suppressHydrationWarning> <body className="relative flex flex-col min-h-screen font-sans antialiased overflow-x-hidden selection:bg-primary/90 selection:text-white" suppressHydrationWarning>
<NextIntlClientProvider messages={clientMessages} locale={safeLocale}> <NextIntlClientProvider messages={clientMessages} locale={safeLocale}>
<TransitionProvider> <TransitionProvider>
<FramerMotionProvider> <CorporateBackground />
<CorporateBackground /> <InitialLoader shouldShowLoader={!hasSeenLoader} />
<InitialLoader shouldShowLoader={!hasSeenLoader} /> <PageTransitionShutter />
<PageTransitionShutter /> <SkipLink />
<SkipLink /> <Header navLinks={navLinks} />
<Header navLinks={navLinks} /> <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
<MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
<main
<main id="main-content"
id="main-content" className="flex-grow overflow-visible"
className="flex-grow overflow-visible" tabIndex={-1}
tabIndex={-1} >
> {children}
{children} </main>
</main>
<Footer companyInfo={companyInfo} /> <Footer companyInfo={companyInfo} />
<JsonLd /> <JsonLd />
<AnalyticsShell /> <AnalyticsShell />
<FeedbackClientWrapper /> <FeedbackClientWrapper />
</FramerMotionProvider>
</TransitionProvider> </TransitionProvider>
</NextIntlClientProvider> </NextIntlClientProvider>
</body> </body>

7
components/providers/DynamicFramerMotion.tsx
View File

@@ -1,7 +0,0 @@
'use client';
import dynamic from 'next/dynamic';
export const DynamicFramerMotion = dynamic(
() => import('./FramerMotionProvider').then((mod) => mod.FramerMotionProvider),
{ ssr: true }
);

11
components/providers/FramerMotionProvider.tsx
View File

@@ -1,11 +0,0 @@
'use client';
import { LazyMotion } from 'framer-motion';
const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
export function FramerMotionProvider({ children }: { children: React.ReactNode }) {
return (
<LazyMotion features={loadFeatures} strict>
{children}
</LazyMotion>
);
}

7
components/providers/TransitionProvider.tsx
View File

@@ -2,6 +2,9 @@
import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react'; import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import { useRouter, usePathname, useSearchParams } from 'next/navigation';
import { LazyMotion } from 'framer-motion';
const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
interface TransitionContextType { interface TransitionContextType {
isTransitioning: boolean; isTransitioning: boolean;
@@ -68,7 +71,9 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
setTransitionMessage={setTransitionMessage} setTransitionMessage={setTransitionMessage}
/> />
</React.Suspense> </React.Suspense>
{children} <LazyMotion features={loadFeatures}>
{children}
</LazyMotion>
</TransitionContext.Provider> </TransitionContext.Provider>
); );
} }