mui icon flashing on page load with next js

I wrote this setup according to the document:

emotion-provider.ts


import React, { PropsWithChildren } from "react";
import createCache from "@emotion/cache";
import { prefixer } from "stylis";
import rtlPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";

// Create rtl cache
const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [prefixer, rtlPlugin],
});

const EmotionProvider = ({ children }: PropsWithChildren) => {
  return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
};

export default EmotionProvider;

mui-provider.ts

import React, { PropsWithChildren } from "react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import { ThemeProvider } from "@mui/material/styles";
import { CssBaseline } from "@mui/material";
import theme from "@/theme";

const MuiProvider = ({ children }: PropsWithChildren) => {
  return (
    <AppRouterCacheProvider>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </AppRouterCacheProvider>
  );
};

export default MuiProvider;

layout.tsx

import EmotionProvider from "@/providers/emotion-provider";
import MuiProvider from "@/providers/mui-provider";
import { iranYekanX } from "@/theme/fonts";

import "./globals.css";

export const metadata: Metadata = {
  title: "Ms Cosmetic Admin Panel",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="fa" dir="rtl">
      <body className={`${iranYekanX.variable}`}>
        <EmotionProvider>
          <MuiProvider>{children}</MuiProvider>
        </EmotionProvider>
      </body>
    </html>
  );
}

When the page is loaded, the icon is large and then returns to normal after a second, what's the problem?

Your environment

System: OS: macOS 15.0.1 Binaries: Node: 22.11.0 - /usr/local/bin/node npm: 10.9.0 - /usr/local/bin/npm pnpm: 9.12.3 - /opt/homebrew/bin/pnpm Browsers: Chrome: 130.0.6723.70 Edge: Not Found Safari: 18.0.1 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/icons-material: ^6.1.5 => 6.1.5 @mui/material: ^6.1.5 => 6.1.5 @mui/material-nextjs: ^6.1.5 => 6.1.5 @types/react: ^18 => 18.3.12 react: 19.0.0-rc-02c0e824-20241028 => 19.0.0-rc-02c0e824-20241028 react-dom: 19.0.0-rc-02c0e824-20241028 => 19.0.0-rc-02c0e824-20241028 typescript: ^5 => 5.6.3

Search keywords: flashing

mui / material-ui

mui icon flashing on page load with next js #44259

Your environment