From ea673e0d59a25241e8089894be03333f33eea403 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 6 Aug 2025 14:11:36 +0200 Subject: [PATCH 1/2] FOUC fix by adding the cache as a prop --- apps/website/pages/_app.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index d2f35c8db..fb44f3701 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -18,11 +18,12 @@ type NextPageWithLayout = NextPage & { }; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; + emotionCache?: ReturnType; }; const clientSideEmotionCache = createCache({ key: "css", prepend: true }); -export default function App({ Component, pageProps }: AppPropsWithLayout) { +export default function App({ Component, pageProps, emotionCache = clientSideEmotionCache }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page); const componentWithLayout = getLayout(); const [filter, setFilter] = useState(""); @@ -47,7 +48,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) { }; return ( - + From ec9771cc635de58ffc5367b162b593e9a193211d Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 6 Aug 2025 14:37:11 +0200 Subject: [PATCH 2/2] changed emotionCache type --- apps/website/pages/_app.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index fb44f3701..fd97164cc 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -10,7 +10,7 @@ import { LinksSectionDetails, LinksSections } from "@/common/pagesList"; import Link from "next/link"; import StatusBadge from "@/common/StatusBadge"; import "../global-styles.css"; -import createCache from "@emotion/cache"; +import createCache, { EmotionCache } from "@emotion/cache"; import { CacheProvider } from "@emotion/react"; type NextPageWithLayout = NextPage & { @@ -18,7 +18,7 @@ type NextPageWithLayout = NextPage & { }; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; - emotionCache?: ReturnType; + emotionCache?: EmotionCache; }; const clientSideEmotionCache = createCache({ key: "css", prepend: true });