Ant Design Version 5 is leading to an initial load issue where components appear unstyled for a

This current issue is reminiscent of a problem we faced in the past. Here is the link to the relevant discussion: Github Discussion

Currently, I am utilizing Next.js 13 and Ant Design V5. When loading Ant Design components, they initially appear as unstyled before returning to their normal appearance. The discussion suggests that it might be related to an SSR issue.

Are there any alternative solutions apart from those proposed in the discussion?

  • Disabling SSR works, but it's not ideal.
  • visibility: hidden until the useEffect sets the mount state to true does not resolve the issue as the animation still persists.
  • Disabling the animation removes it, but the transition from unstyled to styled component remains.
next.jsantdserver-side-rendering

Answer №1

function initializeApp({ Component, pageProps }: AppProps) {
    const [mounted, setMounted] = useState(false);
    useEffect(() => setMounted(true), []);

    if (typeof window !== 'undefined') {
        window.onload = () => {
            document.getElementById('holderStyle')!.remove();
        };
    }

    return (
        <ConfigProvider>
            <style
                id="holderStyle"
                dangerouslySetInnerHTML={{
                    __html: `
                    *, *::before, *::after {
                        transition: none!important;
                    }
                    `,
                }}
            />
            <div style={{ visibility: !mounted ? 'hidden' : 'visible' }}>
                <Component {...pageProps} />
            </div>
        </ConfigProvider>
    );
}

After careful testing, this solution has been identified as the most effective approach to address the issue while maintaining SSR.

Answer №3

Dealing with the same issues, I found a solution by referring to their recently updated documentation here

Implementing it within the app folder worked seamlessly for me

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing difficulties with integrating a new key into the session cookie while using the Next-auth(next.js) package

Currently in the process of developing a next.js application and utilizing the next-auth package for handling the login authentication. I'm faced with the challenge of incorporating a new key called "apiToken" obtained from my api into the session co ...

next.jsnext-auth

Unlocking the power of variables in Next.js inline sass styles

Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...

javascriptreactjstypescriptsassnext.js

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

I am currently facing a compatibility problem involving isomorphic-dompurify and dompurify in my Next.js 13 project. It appears that both libraries are incompatible due to their dependencies on canvas, and I am struggling to find a suitable alternative. M ...

javascriptreactjstypescriptnext.jsdompurify

NextJS is unable to locate the directory path __dirname

I encountered a build error while working on a solito.dev, NextJS + Expo application. Initially, it was running smoothly. Here's the sequence of events: After getting a new Mac M2 chip computer, I pulled this repository from GitHub The nextJS app wo ...

next.js

The Server-Side Rendered page is experiencing inconsistencies in rendering

I am currently working on a straightforward NextJS project with just one page. The application is configured to utilize redux, next-redux-wrapper, and redux thunk. It is important that the page always undergo server-side rendering. Here is an example of h ...

javascriptreactjsnext.js

Executing a function within JSX to dismiss a modal in NextJS

I am currently utilizing the Tanstack React Query library to perform a POST request from a Modal that includes a form: const addDay = (day: TDay) => { const apiURL = process.env.NEXT_PUBLIC_SERVER_URL const queryURL = apiURL + router ...

javascriptreactjstypescriptnext.js

New content appears in Material UI v4 Textfield after being typed

One interesting issue I'm facing is with a list of TextFields on the page where users can input text. The variable data holds the dataset. The problem is, as shown in the gif below, there is a delay in displaying the text after the user types. I initi ...

reactjsnext.jsmaterial-ui

What advantages does incorporating SSR with dynamic imports bring?

How does a dynamic imported component with ssr: true differ from a normal component import? const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), { ssr: true, }); What are the advantages of one method over the ...

javascriptreactjsnext.jsjsx

Can you provide guidance on integrating this jQuery script into my Next.Js application effectively?

I have been using a script on a plain HTML website, importing it via the <script> tag: (function($) { var wa_time_out, wa_time_in; $(document).ready(function() { $(".wa__btn_popup").on("click", function() { if ($(&qu ...

javascriptjqueryreactjsnext.jsscript-tag

Accessing an external API through a tRPC endpoint (tRPC Promise is resolved before processing is complete)

I want to utilize OpenAI's API within my Next.js + tRPC application. It appears that my front-end is proceeding without waiting for the back-end to finish the API request, resulting in an error due to the response still being undefined. Below is my e ...

reactjstypescriptnext.jstrpc.io

Effortless Hydration and Efficient Code Splitting in NextJS Application

I understand Lazy Hydration and Code Splitting, but how can I ensure that the split chunk is only downloaded when the component is being hydrated? This is what my code currently looks like import React from 'react'; import dynamic from 'nex ...

reactjswebpacknext.js

The following MongoDB errors unexpectedly popped up: MongoNetworkError: connect ETIMEDOUT and MongoServerSelectionError: connect ETIMEDOUT

I've been working on a React and NextJS App for about a month now, utilizing MongoDB as my database through MongoDB Atlas. I'm currently using the free version of MongoDB Atlas. For the backend, I rely on NextJS's api folder. Everything wa ...

javascriptdatabasemongodbnext.jsnosql

What is the process for including headers in a JSON response in Next.js?

Here is a code snippet demonstrating how to respond with JSON: import { NextResponse } from 'next/server'; export const GET = async () => { return NextResponse.json({ status: 'OK', }); }; Additionally, here is an example of ...

next.jsnext.js13

Struggling with an endless rerender loop in Redux Toolkit and Next.js... despite going through similar questions, still no solution in sight

I seem to be stuck in an endless rerender loop on one specific page. Strangely, the same logic works fine on other pages with different slices. However, on this particular page, it triggers the infinite loop and the tab freezes... Here are the steps I&apos ...

next.jsreact-reduxinfinite-loopredux-toolkitrerender

Is it secure to store the access token within the NextAuth session?

Utilizing a custom API built with Node.js and Express.js, I have implemented nextAuth to authenticate users in my Next.js application. Upon a successful login, the date is stored in the nextAuth session and can be accessed using the useSession hook. To acc ...

javascriptreactjsnext.jsjwt

Error: The specified module cannot be found. The client package path is not exported from the package

I've encountered an issue while using Next.js and NextAuth with Nginx. My build is failing, and I'm unsure of how to resolve this specific error. 2021-12-06T09:35:02.4779281Z https://nextjs.org/telemetry 2021-12-06T09:35:02.4779648Z 2021-12-06T ...

reactjsnext.jsazure-pipelinesnext-auth

What is the best method for accessing a store in Next.js with Redux Toolkit?

Currently, I am working on incorporating integration testing for my application using Jest. To achieve this, I need to render components in order to interact with various queries. However, in order to render a component, it must be wrapped in a Provider to ...

typescriptreduxnext.jsjestjsredux-toolkit

The HTTPOnly cookie is not accessible within the getServerSideProps function in Next.js

Why isn't the jid cookie available in getServerSideProps using Next JS? Here's the scenario: https://i.stack.imgur.com/FLRGk.png The jid cookie is generated by an Expressjs API at https://api-dev.example.com. I'm attempting to retrieve thi ...

javascriptcookiesnext.jshttponly

next-js module for easy integration on external site

Looking to create a feature where merchants can embed the merchant calendar page on their own website using a script, similar to Calendly. Struggling with webpack configuration and looking for guidance on how to achieve this functionality for a single page ...

node.jsreactjsnext.js

My element is unexpectedly changing its properties

One puzzling issue I'm facing involves a component that retrieves an array from a parent prop, stores it in a state, makes modifications to the array, and then aims to send the modified version back up to the parent. The confusion arises when I obser ...

reactjsnext.jsreact-propsreact-state