Search code examples
reactjstypescriptmaterial-uinext.jsstyled-components

CSS is not rendered for a second after loading a webpage

CSS is not rendered for a second when i load a webpage which is created with React, Next.js, Material UI, and Styled-component. My website is not SSR, but this issue is similar https://github.com/ks-rogers/react-date-picks/issues/7

This is the website which has the issue https://swipe-cards.herokuapp.com/

In local environment, it doesnt happen.

Does anyone know how to fix this?

Solution

    1. Make sure you use the appjs as in the official example https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js

    2. Make sure you use document js like in example:

    https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

    In addition, use a material ui loader in your appjs to show loading progress.

        import LinearProgress from '@material-ui/core/LinearProgress';
    .....
    const [isLoading, setLoadingState] = useState(false);
      useEffect(() => {

        router.events.on('routeChangeStart', () => {
          setLoadingState(true);
        });
    
        router.events.on('routeChangeComplete', () => {
          setLoadingState(false);
        });
    
        router.events.on('routeChangeError', () => {
          setLoadingState(false);
        });

....
...
  return (
    <React.Fragment>
      <Head>
      ........
      {isLoading? (  
        <>
          <div className="pageLoader">
            <LinearProgress />
          </div>