您可以创建一个上下文，它将位于应用程序的根目录中，并仅显示加载，然后在所有计算，加载，数据获取......之后。已完成您刚刚设置的隐藏负载。
这里有一个简单的例子：

// 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)
}

现在，在应用入口点（_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>
  )
}

现在，在组件中，如果你想在做其他事情时显示load，你也可以控制这个上下文的加载：

// anycomponent.tsx

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

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

  ....
}