Antd CSS application is experiencing a delay

Question

Antd CSS application is experiencing a delay

Upon refreshing the page on Next.js with Antd CSS, I am experiencing a delay in applying the styles. The content appears misaligned right after the reload. Is there a way to fix this issue?

I suspect it may be related to SSR, but unfortunately, I have not been able to find a solution.

next.js: 13
antd: 5

reactjs next.js antd

Answer 1

Answer №1

You have the ability to establish a context at the root of your application that displays a loading indicator until all processes such as computation and data fetching are complete, at which point you can hide the loading indicator.

Here is an example implementation:

// mycontext.ts

import React, {
  useState,
  createContext,
  useMemo,
  useContext
} from 'react'
import {
  Spin
} from 'antd'

type ContextType = {
  loading: boolean
  setLoading: React.Dispatch<React.SetStateAction<boolean>>
}

const MyContext = createContext( {} as ContextType )

export function ContextProvider({children}) {
  const [loading, setLoading] = useState<boolean>(true)

  return (
    <MyContext.Provider
      value={useMemo(() => ({
        loading, setLoading
      }), [loading])}
    >
      <Spin spinning={loading}>
        {children}
      </Spin>
    </MyContext.Provider>
  )
}

export function useMyContext {
  return useContext(MyContext)
}

To incorporate this context in the entry point of your app (_app.tsx):

import {ContextProvider} from 'path/to/context'
import {
  App,
  ConfigProvider
} from 'antd'

function _app({
  Component,
  pageProps
}: AppProps) {
  return (
    <ConfigProvider
        locale={ ... }
        theme={ ... }
    >
      <App>
        <ContextProvider { ...pageProps }>
          <Component { ...pageProps } />
        </ContextProvider>
      </App>
    </ConfigProvider>
  )
}

In individual components, you can also manage the visibility of the loading indicator within this context:

// anycomponent.tsx

import {useMyContext} from 'path/to/context'

function MyComponent() {
  const {loading, setLoading} = useMyContext()

  ....
}

Answer 2

You have the ability to establish a context at the root of your application that displays a loading indicator until all processes such as computation and data fetching are complete, at which point you can hide the loading indicator.

Here is an example implementation:

// mycontext.ts

import React, {
  useState,
  createContext,
  useMemo,
  useContext
} from 'react'
import {
  Spin
} from 'antd'

type ContextType = {
  loading: boolean
  setLoading: React.Dispatch<React.SetStateAction<boolean>>
}

const MyContext = createContext( {} as ContextType )

export function ContextProvider({children}) {
  const [loading, setLoading] = useState<boolean>(true)

  return (
    <MyContext.Provider
      value={useMemo(() => ({
        loading, setLoading
      }), [loading])}
    >
      <Spin spinning={loading}>
        {children}
      </Spin>
    </MyContext.Provider>
  )
}

export function useMyContext {
  return useContext(MyContext)
}

To incorporate this context in the entry point of your app (_app.tsx):

import {ContextProvider} from 'path/to/context'
import {
  App,
  ConfigProvider
} from 'antd'

function _app({
  Component,
  pageProps
}: AppProps) {
  return (
    <ConfigProvider
        locale={ ... }
        theme={ ... }
    >
      <App>
        <ContextProvider { ...pageProps }>
          <Component { ...pageProps } />
        </ContextProvider>
      </App>
    </ConfigProvider>
  )
}

In individual components, you can also manage the visibility of the loading indicator within this context:

// anycomponent.tsx

import {useMyContext} from 'path/to/context'

function MyComponent() {
  const {loading, setLoading} = useMyContext()

  ....
}

Answer 3

Answer №2

generate a file in this format.

"use client";

import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs";
import { useServerInsertedHTML } from "next/navigation";
import React from "react";
const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
  const cache = createCache();
  useServerInsertedHTML(() => <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />);

  const render = <>{children}</>;

  if (typeof window !== "undefined") {
    return render;
  }

  return (
    <StyleProvider hashPriority="high" cache={cache}>
      {children}
    </StyleProvider>
  );
};

export default StyledComponentsRegistry;

and enclose it within the main layout document

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-gray-200">
                  <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}

This method was successful for me. If it doesn't work for you, consider updating the packages

Answer 4

generate a file in this format.

"use client";

import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs";
import { useServerInsertedHTML } from "next/navigation";
import React from "react";
const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
  const cache = createCache();
  useServerInsertedHTML(() => <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />);

  const render = <>{children}</>;

  if (typeof window !== "undefined") {
    return render;
  }

  return (
    <StyleProvider hashPriority="high" cache={cache}>
      {children}
    </StyleProvider>
  );
};

export default StyledComponentsRegistry;

and enclose it within the main layout document

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-gray-200">
                  <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}

This method was successful for me. If it doesn't work for you, consider updating the packages

Answer 5

Answer №3

Ensure you make the necessary changes in your _document.tsx file

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
  render() {
    return (
      <Html>
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

For more information, check out this helpful Link

Answer 6

Ensure you make the necessary changes in your _document.tsx file

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
  render() {
    return (
      <Html>
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

For more information, check out this helpful Link

Antd CSS application is experiencing a delay

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the implementation of constructors and classes in JavaScript

Creating a chart in React using vanilla JavaScript: A step-by-step guide

Experiencing difficulty importing Materialize CSS JS into React

Utilizing the 'use server' behavior in Next.js Server Component without explicit declaration

What is the method to prevent the label from closing in the MUI 5 datepicker?

How to efficiently pass props between components in NextJs

The value of type 'string' cannot be assigned to type '"menu" | "selectedMenu" | undefined' as it is not compatible with the specified types

Is there a way to modify the characteristics of a specific dependency?

The React DOM isn't updating even after the array property state has changed

Server Functions and Documents

What is the best way to hold off displaying the entire component until the image inside has finished loading?

Error in React Bootstrap: ReferenceError - 'openModal' is not defined

Is it necessary to bring in CSS for the following page?

Why is the exit animation malfunctioning in Next.js with Framer Motion?

How to resolve undefined callback when passing it to a custom hook in React Native

Looking to update the date in 'React Fullcalendar' using a 'drop-down' filter. How can this be accomplished?

Issue with React-Toastify not displaying on the screen

What steps do I need to take in order to modify information within a table using Symfony?

Ending a Firestore `get` query upon unmounting component

Creating a nested or indented text list with MUI Typography is a breeze!