Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FOUC in Production NextJS apps

See original GitHub issue

What package has an issue

@mantine/core

Note: This issue only occurs in a production nextjs build. It is not noticeable while running the app in development

Describe the bug

Hello! I’ve noticed a quick jerk/blink that seems to happen before styles load. (See the gif below for visual). I’m not sure what’s causing this behavior, but I wanted to know if I was doing something wrong in my implementation.

I’m currently using vercel to deploy the site and using domain forwarding. Could this be the culprit?

Thanks for any help!

Here is my _document file:

import Document, {
  Html, Head, Main, NextScript,
} from 'next/document';
import {createGetInitialProps} from '@mantine/next';

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
  static getInitialProps = getInitialProps;

  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="shortcut icon" href="/static/favicon.ico" />
        </Head>
        <body className="light">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

And the _app file:

import Head from 'next/head';
import {AppProps} from 'next/app';
import {MantineProvider} from '@mantine/core';
import {SubscribeContextProvider} from '../contexts/SubscribeContext';
import {FeedbackContextProvider} from '../contexts/FeedbackContext';
import Navigation from '../components/Navigation';
import Footer from '../components/Footer';

const App = ({Component, pageProps}: AppProps) => (
  <>
    <Head>
      <title>Melo</title>
    </Head>
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        colorScheme: 'light',
      }}
    >
      <SubscribeContextProvider>
        <FeedbackContextProvider>
          <Navigation />
          <Component {...pageProps} />
          <Footer />
        </FeedbackContextProvider>
      </SubscribeContextProvider>
    </MantineProvider>
  </>
);

export default App;