styles flickering chakra-ui-next with nextjs #2434

devclouddz · 2020-11-07T22:49:25Z

devclouddz
Nov 7, 2020

i did build a little website using nextjs and chakra ui and it was awesome and fast but i have one problem when the page first load or i refresh it manually i get ugly css for 2 to 3 seconds and sometimes it loads without css and am wondering what am doing wrong is it a common problem and is there a solution or a workaround?

_app.js

function MyApp({ Component, pageProps }) {
  const [load, setLoad] = React.useState(true);
  const store = useStore(pageProps.initialReduxState);
  const persistor = persistStore(store);


  return (
 
      <Provider store={store}>
        <PersistGate loading={<Component {...pageProps} />} persistor={persistor}>
          <ChakraProvider theme={theme}>
           
                <Component {...pageProps} />

             
          </ChakraProvider>
        </PersistGate>
      </Provider>
    </>
  );
}

export default MyApp;

_document.js

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="fr">
        <Head>
          <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
          <meta
            name="description"
            content="This is an example of a meta description.
This will often show up in search results."
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Answered by ljosberinn

Nov 10, 2020

Chakra uses Emotion under the hood, which adds styles right when you render the component for the first time so I don't see any possibility with this happening.

Do you have a repository to look at? Do you SSR or SSG? Does this happen in prod too?

View full answer

ljosberinn · 2020-11-10T10:21:55Z

ljosberinn
Nov 10, 2020

Chakra uses Emotion under the hood, which adds styles right when you render the component for the first time so I don't see any possibility with this happening.

Do you have a repository to look at? Do you SSR or SSG? Does this happen in prod too?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

styles flickering chakra-ui-next with nextjs #2434

{{title}}

Replies: 1 comment

{{title}}

Select a reply

styles flickering chakra-ui-next with nextjs #2434

devclouddz Nov 7, 2020

Replies: 1 comment

ljosberinn Nov 10, 2020

devclouddz
Nov 7, 2020

ljosberinn
Nov 10, 2020