mui 5 causes icon flashing on initial page load with next js #34652

StarAzure · 2022-10-07T14:44:09Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Steps:

material ui 5 with next js 12.1.5 or 12.1.6 or even latest 12.3.1
page on initial load - icons flash as a huge icon on page load
also followed example - https://github.com/mui/material-ui/tree/master/examples/nextjs

This was discussed briefly here but still happens - #32830

Current behavior 😯

Huge icons flash with nextjs

Example - https://fontawesome.com/v6/docs/web/use-with/react/use-with#next-js

Expected behavior 🤔

normal icons size

Context 🔦

large icons shows on initial page load

Your environment 🌎

next js 12.1.5 or 12.3.1
react 17.0.2
mui latest version 5 installed this week

StarAzure · 2022-10-07T18:29:47Z

Also described here but was never fixed - #32775

mnajdova · 2022-10-11T09:49:41Z

Is this related to font awesome icons only, or SVG icons too? Can you link a github repository with a reproduction?

StarAzure · 2022-10-12T15:03:58Z

@mnajdova I do not have a public repo for this so I will have to create one that can reproduce this.

I have however added the 3 important file - app.js, document.js and my Layout.js
appjs:

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { CacheProvider } from '@emotion/react';
import CssBaseline from '@mui/material/CssBaseline';
import Layout from '../components/layout';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import LinearProgress from '@mui/material/LinearProgress';
import * as gtag from '../lib/googleAnalytics';
import '../styles/globals.css';
import createEmotionCache from '../components/theme/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function NCD(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  const [isLoading, setLoadingState] = useState(false);

  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url)
    }
    // Logging to prove _app.js only mounts once,
    // but initializing router events here will also accomplishes
    // goal of setting state on route change
    router.events.on('routeChangeStart', () => {
      setLoadingState(true);
    });

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

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

    if (typeof window == 'undefined') {
      setLoadingState(true);
    }

    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>{process.env.SITENAME}</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <CacheProvider value={emotionCache}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
        <Layout>
      {isLoading? (  
        <>
          <div className="pageLoader">
            <LinearProgress />
          </div>
         </>):(
          <>

          <Component {...pageProps} />
        
         </>
        )}
        </Layout>
        </CacheProvider>
    </React.Fragment>
  );
}

NCD.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

document.js


import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import createEmotionCache from '../components/theme/createEmotionCache';
import { GA_TRACKING_ID } from '../lib/googleAnalytics';
import ServerStyleSheets from '@mui/styles/ServerStyleSheets';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang='en'>
        <Head>

          <link rel="shortcut icon" href="/favicon.ico" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />

        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  const originalRenderPage = ctx.renderPage;

  // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
  // However, be aware that it can have global side effects.
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  const sheets = new ServerStyleSheets()

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) =>
        function EnhanceApp(props) {
          return sheets.collect(<App emotionCache={cache} {...props} />);
        },
    });

  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents Emotion to render invalid HTML.
  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    emotionStyleTags,
  };
};

Layout.js


import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import {lightTheme, darkTheme} from '../components/theme';
import TopAppBar from './ui/topAppBar';
import { useCookies } from 'react-cookie';
import Copyright from '../components/ui/copyright';
import Box from '@mui/material/Box';

const layout = ({ children }) => {
  const [cookies, setCookie] = useCookies(['darkTheme']);

  return <>
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={cookies.darkTheme=="true" ? darkTheme : lightTheme}>
        <CssBaseline />
      
        <header>
          <nav>
          <TopAppBar />
          </nav>
        </header>

          <main>{children}</main>
      <Box mt={8} mb={4} >
        <Copyright />
      </Box>
      </ThemeProvider>
    </StyledEngineProvider>
  </>;
};

export default layout;

StarAzure · 2022-10-12T15:18:46Z

@mnajdova The suggestion I found on stackoverflow is to load the mui icons upfront. How can I do this for mui icons?

For mui, I import one icon at a time
Example:
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';

How can I do a global import of mui icons upfront and prevent reimport?

mnajdova · 2022-10-12T15:32:09Z

Maybe try forking the official example and start from there. The issue is not happening there - https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs?file=README.md

StarAzure · 2022-10-12T17:55:16Z

@mnajdova Thanks. Followed the example for app, document js but same issue. Has this anything to do with how emotion css is loaded first at the top before even page title?

StarAzure · 2022-10-12T20:08:12Z

I fixed the issue with a hack in my high level code but I don't think this is the efficient way. It probably defeats the purpose of SSR

Basically I wrapped my layout and everything around useEffect. thoughts??

I used useEffect but thinking about using https://reactjs.org/docs/hooks-reference.html#uselayouteffect


  useEffect(() => {
    setLoading(false);
  }, []);
  const toReturn = (<>
    <StyledEngineProvider injectFirst>
...
...
    </StyledEngineProvider>
  </>);
  if (!loading) {
    return toReturn
  }

mnajdova · 2022-10-14T06:13:08Z

I am closing the issue, there is no clear reproduction, it works on the example project. Feel free to re-open in case if you create a reproduction repository.

Wellers0n · 2023-01-16T22:23:11Z

IMG_3045.mov

I have this problem.

guansss · 2023-02-15T03:50:01Z

Looks like <StyledEngineProvider> is conflicting with <CacheProvider>. Just remove the <StyledEngineProvider> and the problem is gone.

To keep the effect of the injectFirst option, create your Emotion cache as follows:

const cache = createCache({
  key: 'css',
  prepend: true,
});

This is memtioned in the docs: https://mui.com/material-ui/guides/interoperability/#tailwind-css

Edit: placing <StyledEngineProvider> above <CacheProvider> also seems to work:

<StyledEngineProvider injectFirst>
  <CacheProvider value={emotionCache}>
    ...
  </CacheProvider>
</StyledEngineProvider>

iamPedram1 · 2023-10-22T16:32:53Z

any updates for this issue? i have the same issue on this version 👇
`
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.14",
"@mui/material": "^5.14.14",
"next": "13.5.6",

`

when page loads icons are so huge and then after 1 sec it goes back to original size.

lucasvieirasilva · 2025-01-02T19:16:54Z

+1, same here, when the page loads icons are so huge, and then after 1 sec it goes back to its original size.

next.js: 14.2.22
mui: 6.1.2

I'm using the AppRouterCacheProvider as recommended in the MUI docs (https://mui.com/material-ui/integrations/nextjs/)

StarAzure added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 7, 2022

michaldudak assigned mnajdova Oct 10, 2022

mnajdova added status: waiting for author Issue with insufficient information package: icons Specific to @mui/icons and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 11, 2022

github-actions bot removed the status: waiting for author Issue with insufficient information label Oct 12, 2022

mnajdova added the status: waiting for author Issue with insufficient information label Oct 12, 2022

github-actions bot removed the status: waiting for author Issue with insufficient information label Oct 12, 2022

mnajdova closed this as completed Oct 14, 2022

mnajdova added the status: waiting for author Issue with insufficient information label Oct 14, 2022

richardolsson mentioned this issue Oct 12, 2024

Fix styling flicker on page load zetkin/app.zetkin.org#2254

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mui 5 causes icon flashing on initial page load with next js #34652

mui 5 causes icon flashing on initial page load with next js #34652

StarAzure commented Oct 7, 2022 •

edited

Loading

StarAzure commented Oct 7, 2022

mnajdova commented Oct 11, 2022

StarAzure commented Oct 12, 2022

StarAzure commented Oct 12, 2022

mnajdova commented Oct 12, 2022

StarAzure commented Oct 12, 2022 •

edited

Loading

StarAzure commented Oct 12, 2022 •

edited

Loading

mnajdova commented Oct 14, 2022 •

edited

Loading

Wellers0n commented Jan 16, 2023

guansss commented Feb 15, 2023 •

edited

Loading

iamPedram1 commented Oct 22, 2023 •

edited

Loading

lucasvieirasilva commented Jan 2, 2025

mui 5 causes icon flashing on initial page load with next js #34652

mui 5 causes icon flashing on initial page load with next js #34652

Comments

StarAzure commented Oct 7, 2022 • edited Loading

Duplicates

Latest version

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

StarAzure commented Oct 7, 2022

mnajdova commented Oct 11, 2022

StarAzure commented Oct 12, 2022

StarAzure commented Oct 12, 2022

mnajdova commented Oct 12, 2022

StarAzure commented Oct 12, 2022 • edited Loading

StarAzure commented Oct 12, 2022 • edited Loading

mnajdova commented Oct 14, 2022 • edited Loading

Wellers0n commented Jan 16, 2023

guansss commented Feb 15, 2023 • edited Loading

iamPedram1 commented Oct 22, 2023 • edited Loading

lucasvieirasilva commented Jan 2, 2025

StarAzure commented Oct 7, 2022 •

edited

Loading

StarAzure commented Oct 12, 2022 •

edited

Loading

StarAzure commented Oct 12, 2022 •

edited

Loading

mnajdova commented Oct 14, 2022 •

edited

Loading

guansss commented Feb 15, 2023 •

edited

Loading

iamPedram1 commented Oct 22, 2023 •

edited

Loading