From 757201fdc5c04a3f15504f74bf8ab85bb6018c2b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 27 Oct 2023 11:09:38 +0200 Subject: refactor(hooks,provider): move reduce motion setter Since the local storage key is not meant to change between the components, it should be set directly inside the app file. So both the local storage and the data attribute should be handle in a provider. I also added a custom document because we need a script to retrieve the stored value in local storage earlier to avoid flashing on hydration. --- src/pages/_app.tsx | 37 +++++++++++++++++++++++-------------- src/pages/_document.tsx | 26 ++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 14 deletions(-) create mode 100644 src/pages/_document.tsx (limited to 'src/pages') diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 914b0b6..c332432 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -5,7 +5,11 @@ import '../styles/globals.scss'; import type { AppPropsWithLayout } from '../types'; import { settings } from '../utils/config'; import { STORAGE_KEY } from '../utils/constants'; -import { AckeeProvider, PrismThemeProvider } from '../utils/providers'; +import { + AckeeProvider, + MotionProvider, + PrismThemeProvider, +} from '../utils/providers'; const App = ({ Component, pageProps }: AppPropsWithLayout) => { const { locale, defaultLocale } = useRouter(); @@ -20,21 +24,26 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => { storageKey={STORAGE_KEY.ACKEE} tracking="full" > - - - - {getLayout(, {})} - - - + + + {getLayout(, {})} + + + + ); }; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..317d3af --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,26 @@ +import { Html, Head, Main, NextScript } from 'next/document'; +import Script from 'next/script'; +import { STORAGE_KEY } from '../utils/constants'; + +// eslint-disable-next-line @typescript-eslint/no-shadow -- Required by NextJs +export default function Document() { + return ( + + +