Next.js

Question

我想在 next.js 中的第一次渲染时实现加载屏幕，但是当我加载页面时，正文内容会在加载程序启动之前闪烁片刻。我不确定我应该写什么不同的东西。如果我将初始状态更改为 true ，这似乎也不起作用，因为加载程序的包装器样式将不适用，而是我得到一个空白 html 页面，左上角有微调器。

_app.js

function MyApp({ Component, pageProps }) {
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);

    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, []);

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : (
        <ThemeProvider theme={dark}>
          <GlobalStyles />
          <Component {...pageProps} />;
        </ThemeProvider>
      )}
    </>
  );
}

export default MyApp;

加载器div风格：

.loader-wrapper{
  width:100%;
  height: 100vh;
  background: ${({ theme }) => theme.colors.body};
  display: flex;
  align-items: center;
  justify-content: center;
}

加载器组件

export const Loader = () => {
  return (
    <div className='loader-wrapper'>
      <Oval
        ariaLabel='loading-indicator'
        height={100}
        width={100}
        strokeWidth={2}
        color='#32ffa9'
        secondaryColor='#1f1f1fdc'
      />
    </div>
  );
};

Answer 1

那是因为 useEffect 在组件呈现后调用。

生命周期：

1- isLoading = false <ThemeProvider /> 呈现的初始状态（主体内容闪烁片刻）

2- 调用了 useEffect 并且 isLoading = true

3- 组件 re-rendered 但这次它将呈现 <Loader />

4- 3 秒后调用 setTimeout 回调 isLoading = false

5- 组件 re-rendered 它将再次渲染 <ThemeProvider />

所以你应该创建你的首字母 isLoading = true，我无法理解“加载器的包装样式不适用”这个问题。你能再描述一下吗？

我为您制作了 codesandbox 示例，我认为它可以按您的需要工作（它不是 NextJS 应用程序，但由于所有代码都是纯 React，因此它可以在两者上工作）

Next.js - 尝试实现初始加载屏幕，但内容在加载程序启动前闪烁了片刻

Next.js - trying to implement an initial loading screen but content flashes for a moment before loader starts

loader