Next.js13+Chakra UI刷新白屏FOUC及loading.tsx无效问题求助

问题现象 #

• 刷新页面时，深色主题加载完成前屏幕会闪白一秒；
• 国际化配置与字体设置会短暂恢复为默认值，之后才切换到用户已保存的偏好设置。

推测问题原因是刷新时读取并应用cookies和localStorage中的设置存在延迟，不确定是否与Chakra UI的主题初始化延迟问题有关。

想了解是否可以通过集成NProgress或类似加载条组件来掩盖这些过渡性的闪烁问题？

尝试的解决方案（未生效） #

我创建了loading.tsx文件来显示加载状态，但该组件完全没有显示出来，代码如下：

import { Spinner, Flex } from '@chakra-ui/react';
import { Text } from '@chakra-ui/layout';

const Loading = () => {
  return (
    <Flex
      w="100vw"
      h="100vh"
      direction="column"
      color="white"
      justifyContent="center"
      alignItems="center"
    >
      <Text>Just give us a moment...</Text>
      <Spinner
        thickness="4px"
        speed="0.65s"
        emptyColor="gray.200"
        color="blue.500"
        size="xl"
        mt="1rem"
      />
    </Flex>
  );
};

export default Loading;

请问这个加载组件不显示的问题出在哪里？

相关代码文件 #

src/app/[locale]/layout.tsx #

import React from 'react';
import { NextIntlClientProvider } from 'next-intl';
import { notFound } from 'next/navigation';

export function generateStaticParams() {
  return [{ locale: 'en' }, { locale: 'bg' }];
}

type Props = {
  children: React.ReactNode;
  params: {
    locale: string;
  };
};

const AppLayout = async ({ children, params }: Props) => {
  let messages;
  try {
    messages = (await import(`../../messages/${params.locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang="en">
      <body>
        <NextIntlClientProvider locale={params.locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
};

export default AppLayout;

src/app/[locale]/(main)/layout.tsx #

import React from 'react';
import type { Metadata } from 'next/types';

import { InitializeChakra } from '@/components/InitializeChakra';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';

export const metadata: Metadata = {
  title: 'Quant Logistics',
  description: 'Optimization model for production scheduling',
  keywords: 'quant, logistics, quant logistics, optimization model, optimization model for production scheduling',
};

type Props = {
  children: React.ReactNode;
};

const AppLayout = ({ children }: Props) => {
  return (
    <InitializeChakra>
      <Header />
      {children}
      <Footer />
    </InitializeChakra>
  );
};

export default AppLayout;

package.json #

{
  "name": "logistics",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/next-js": "^2.1.5",
    "@chakra-ui/react": "^2.8.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.4",
    "next": "14.0.0",
    "next-intl": "^2.21.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
    "typescript": "^5"
  }
}

内容的提问来源于stack exchange，提问作者nop