Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

mui icon flashing on page load with next js #44259

Closed
soheilhasanjani opened this issue Oct 29, 2024 · 5 comments
Closed

mui icon flashing on page load with next js #44259

soheilhasanjani opened this issue Oct 29, 2024 · 5 comments
Labels
nextjs support: Stack Overflow Please ask the community on Stack Overflow

Comments

@soheilhasanjani
Copy link

soheilhasanjani commented Oct 29, 2024 •
edited
Loading

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
@soheilhasanjani soheilhasanjani added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 29, 2024
@mj12albert
Copy link
Member

@soheilhasanjani Can you provide a minimal repro, e.g. in a sandbox? (here are some tips)

@mj12albert mj12albert added status: waiting for author Issue with insufficient information nextjs and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 30, 2024
@soheilhasanjani
Copy link
Author

@soheilhasanjani Can you provide a minimal repro, e.g. in a sandbox? (here are some tips)

https://codesandbox.io/p/devbox/yxns4m

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Oct 30, 2024
@mj12albert
Copy link
Member

@soheilhasanjani import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter" -> this was updated in https://github.com/mui/material-ui/releases/tag/v6.1.6

If you are using React RC see #44203

@mj12albert mj12albert added the support: Stack Overflow Please ask the community on Stack Overflow label Oct 31, 2024
@github-actions GitHub Actions
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@soheilhasanjani How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@github-actions github-actions bot removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 31, 2024
@github-actions GitHub Actions
Copy link

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
nextjs support: Stack Overflow Please ask the community on Stack Overflow
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mj12albert @soheilhasanjani