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.

1 files changed, 23 insertions, 14 deletions

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"
     >
-      <IntlProvider
-        locale={appLocale}
-        defaultLocale={defaultLocale}
-        messages={translation}
+      <MotionProvider
+        attribute={STORAGE_KEY.MOTION}
+        storageKey={STORAGE_KEY.MOTION}
       >
-        <ThemeProvider
-          defaultTheme="system"
-          enableColorScheme={true}
-          enableSystem={true}
+        <IntlProvider
+          locale={appLocale}
+          defaultLocale={defaultLocale}
+          messages={translation}
         >
-          <PrismThemeProvider>
-            {getLayout(<Component {...componentProps} />, {})}
-          </PrismThemeProvider>
-        </ThemeProvider>
-      </IntlProvider>
+          <ThemeProvider
+            defaultTheme="system"
+            enableColorScheme={true}
+            enableSystem={true}
+          >
+            <PrismThemeProvider>
+              {getLayout(<Component {...componentProps} />, {})}
+            </PrismThemeProvider>
+          </ThemeProvider>
+        </IntlProvider>
+      </MotionProvider>
     </AckeeProvider>
   );
 };