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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flickering unstyled page on reload with the next.js example #33046

Closed
2 tasks done
yasserelsaid opened this issue Jun 6, 2022 · 3 comments
Closed
2 tasks done

Flickering unstyled page on reload with the next.js example #33046

yasserelsaid opened this issue Jun 6, 2022 · 3 comments
Labels
duplicate This issue or pull request already exists

Comments

@yasserelsaid
Copy link

yasserelsaid commented Jun 6, 2022 •
edited

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 馃槸

I cloned the nextjs example and hosted it on vercel and aws amplify without making any changes. When you first visit the site or reload, a flicker of the unstyled page appears and then the styles kick in. This a link to my deployed instance of the nextjs example: https://main.drktbphxxcs09.amplifyapp.com/

You can also see it if you click the stackblitz button at the bottom of the example and reload the page. (https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs?file=README.md)

Expected behavior 馃

It shouldn't show the unstyled page.

Steps to reproduce 馃暪

Steps:

  1. clone the nextjs example
  2. deploy it on vercel or aws amplfy

Context 馃敠

No response

Your environment 馃寧

No response
@yasserelsaid yasserelsaid added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 6, 2022
@yasserelsaid
Copy link
Author

@siriwatknp I see you made a commit to the nextjs example, do you happen to know how to fix this?

@yasserelsaid yasserelsaid changed the title Flickering on reload with the next.js example Flickering unstyled page on reload with the next.js example Jun 6, 2022
@Taliss

This comment was marked as resolved.

Sign in to view
@siriwatknp
Copy link
Member

siriwatknp commented Jun 9, 2022 •
edited by oliviertassinari

Duplicate of #30410

@siriwatknp siriwatknp added duplicate This issue or pull request already exists and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 9, 2022
@siriwatknp siriwatknp marked this as a duplicate of #30410 Jun 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Taliss @siriwatknp @yasserelsaid