Styles are not applied correctly during the initial loading with NextJS.

[onlit]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

^7.11.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

This is happening with pages route.

During the initial load, or load with CMD + Shift + R, I see a flash of unstyled content then it updates to how it should display. Please see the images below.

Flash:

Expected:

Now, with something like, Material UI, I'd look to investigate the _document.tsx and emotion cache. I have looked into Usage with Next.js docs page and it doesn't do anything special in the _document.tsx.

Here's how my _app.tsx looks tho:

import '@mantine/core/styles.css';
import '@mantine/tiptap/styles.css';
import 'react-toastify/dist/ReactToastify.css';
import '@/styles.css';
import type { AppProps } from 'next/app';
import { MantineProvider } from '@mantine/core';
import theme from '@/theme';
import { Lexend_Deca } from 'next/font/google';
import { ToastContainer } from 'react-toastify';

export const lexendDeca = Lexend_Deca({
  weight: ['300', '400', '500', '600', '700'],
  subsets: ['latin'],
  display: 'swap',
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={lexendDeca.className}>
      <MantineProvider theme={theme}>
        <Component {...pageProps} />
        <ToastContainer
          position='top-center'
          hideProgressBar
          autoClose={3000}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
      </MantineProvider>
    </main>
  );
}

One thing to note is, all these components have their own comp.module.css that is imported into the tsx file and used.

Any idea, what the cause or solution might be for this? Thanks.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• [ ] I would be willing to implement a fix for this issue

[rtivital]

Please provide a repository with a minimal reproduction. Also make sure that the issue is happening in production build and is not related to dev server only.

[rtivital]

The issue is closed due to the lack of the reproduction.