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

perf: completely lazy load framer-motion core via DynamicFramerMotion wrapper
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 29s
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 1m11s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m48s
Details
Build & Deploy / 🏗️ Build (push) Successful in 3m25s
Details
Build & Deploy / 🚀 Deploy (push) Successful in 35s
Details
Build & Deploy / 🔔 Notify (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-06-30 23:05:31 +02:00
parent b2701d6bcd
commit 73886406a4
4 changed files with 40 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@ 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'],
@@ -190,26 +191,28 @@ 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>
<CorporateBackground /> <FramerMotionProvider>
<InitialLoader shouldShowLoader={!hasSeenLoader} /> <CorporateBackground />
<PageTransitionShutter /> <InitialLoader shouldShowLoader={!hasSeenLoader} />
<SkipLink /> <PageTransitionShutter />
<Header navLinks={navLinks} /> <SkipLink />
<MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} /> <Header navLinks={navLinks} />
<MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
<main
id="main-content" <main
className="flex-grow overflow-visible" id="main-content"
tabIndex={-1} className="flex-grow overflow-visible"
> tabIndex={-1}
{children} >
</main> {children}
</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 Normal file
View File

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

11
components/providers/FramerMotionProvider.tsx Normal file
View File

@@ -0,0 +1,11 @@
'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,9 +2,6 @@
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;
@@ -71,9 +68,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
setTransitionMessage={setTransitionMessage} setTransitionMessage={setTransitionMessage}
/> />
</React.Suspense> </React.Suspense>
<LazyMotion features={loadFeatures}> {children}
{children}
</LazyMotion>
</TransitionContext.Provider> </TransitionContext.Provider>
); );
} }