Flash of Unstyled Content using Mantine with Gatsby

Perrottarichard commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

I'm not sure if it's a bug, or if I'm not doing something correctly. I using the gastby-plugin-mantine, but still have a terrible FOUC when loading the page. The issue can be seen here: https://mangolattemantinemaster.gtsb.io/

relevant package.json: "dependencies": { "@emotion/react": "^11.9.3", "@emotion/server": "^11.10.0", "@fontsource/homemade-apple": "^4.5.8", "@fontsource/major-mono-display": "^4.5.10", "@mantine/carousel": "^5.2.0", "@mantine/core": "5.1.0", "@mantine/hooks": "5.1.0", "@tabler/icons": "^1.84.0", "embla-carousel-react": "^7.0.1", "gatsby-plugin-image": "^2.21.0", "gatsby-plugin-manifest": "^4.21.0", "gatsby-plugin-mdx": "^4.0.0", "gatsby-plugin-sharp": "^4.21.0", "gatsby-plugin-web-font-loader": "^1.0.4", "gatsby-source-filesystem": "^4.21.1", "gatsby-transformer-sharp": "^4.21.0", "react": "^18.2.0", "react-dom": "^18.2.0", "smooth-scroll": "^16.1.3" }, "devDependencies": { "eslint": "^8.10.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-typescript": "^16.1.0", "eslint-config-mantine": "1.1.0", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "gatsby": "^4.13.1", "gatsby-plugin-mantine": "5.0.0" }

What version of @mantine/hooks page do you have in package.json?

5.1.0

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

rtivital commented 2 years ago

Hi @Perrottarichard, you have broken ssr, make sure that:

you are following Gatsby getting started guide precisely
you have the latest versions of each @mantine/ package

If that does not help:

See mantine-gatsby-template as reference – https://github.com/mantinedev/mantine-gatsby-template
Or try implementing ssr logic the same way as in mantine.dev website – https://github.com/mantinedev/mantine/tree/master/docs

Perrottarichard commented 2 years ago

Thank you for your quick response. I will try these :)

Perrottarichard commented 2 years ago

Resolved:

Originally I cloned the template @ https://github.com/mantinedev/mantine-gatsby-template
The only major change I made to the template code is I removed Typescript.
I'm not sure if there is a problem with the gatsby-plugin-mantine because I added a gatsby-ssr.js file with the same content as https://github.com/mantinedev/mantine/tree/master/docs and removed the gatsby-plugin-mantine and now the FOUC issue is resolved.

Thank you for your help and awesome open-source packages :) -Richard

mantinedev / mantine