CODEWITHSUNDEEP
reactjstypescriptmaterial-uinext.jsstyled-components
Pytan
Pytan

Reputation: 1674

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?

Upvotes: 0

Views: 841

Answers (1)

Kal
Kal

Reputation: 1774

  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>

Upvotes: 1

Related Questions