temporary unstyled content routing fix
This commit is contained in:
parent
50a0882acf
commit
e95e7b0551
1 changed files with 19 additions and 0 deletions
|
@ -3,6 +3,7 @@ import type { ReactElement, ReactNode } from "react";
|
|||
import type { NextPage } from "next";
|
||||
import type { AppProps } from "next/app";
|
||||
import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion";
|
||||
import { Router } from "next/router";
|
||||
|
||||
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
|
||||
getLayout?: (page: ReactElement) => ReactNode;
|
||||
|
@ -12,6 +13,24 @@ type AppPropsWithLayout = AppProps & {
|
|||
Component: NextPageWithLayout;
|
||||
};
|
||||
|
||||
const routeChange = () => {
|
||||
// Temporary fix to avoid flash of unstyled content
|
||||
// during route transitions. Keep an eye on this
|
||||
// issue and remove this code when resolved:
|
||||
// https://github.com/vercel/next.js/issues/17464
|
||||
|
||||
const tempFix = () => {
|
||||
const allStyleElems = document.querySelectorAll('style[media="x"]');
|
||||
allStyleElems.forEach((elem) => {
|
||||
elem.removeAttribute("media");
|
||||
});
|
||||
};
|
||||
tempFix();
|
||||
};
|
||||
|
||||
Router.events.on("routeChangeComplete", routeChange);
|
||||
Router.events.on("routeChangeStart", routeChange);
|
||||
|
||||
export default function App({ Component, pageProps }: AppPropsWithLayout) {
|
||||
// Use the layout defined at the page level, if available
|
||||
const getLayout = Component.getLayout ?? ((page) => page);
|
||||
|
|
Loading…
Reference in a new issue