React suspense 防止后备微调器闪烁

Question

我想知道是否有一种好方法可以防止反应中的后备闪烁。我正在使用反应路由器，问题是当一个组件被挂起时，回退加载器会非常快地闪烁，这很烦人。我在这里看到了答案React suspense/lazy delay? 如下所示：

const Home = lazy(() => {
  return Promise.all([
    import('./components/Home'),
    new Promise(resolve => setTimeout(resolve, 500))
  ]).then(([moduleExports]) => moduleExports);
});

但我的问题是我有一个带有透明背景的覆盖加载微调器，并且组件在承诺得到解决之前实际上不会加载。这会使页面在没有内容的情况下挂起半秒，实际上比微调器的闪烁更烦人。

所以我想问题是有没有人找到处理这个问题的好方法。我真的很想在页面中添加类似 nprogress 的东西，但不知道如何使用 React.suspense 来实现它。我可能只需要回去使用 react loadable 但我真的不想当 react 具有基本相同的开箱即用功能时。

Answer 1

import React, { Suspense, lazy } from "react";

const Home = lazy(() => {
  return Promise.all([
    import("./home"),
    new Promise(resolve => setTimeout(resolve, 300))
  ]).then(([moduleExports]) => moduleExports);
});

function FullSpinner() {
  return (
    {/**  full spinner jsx goes here */}
    <div className="full-spinner">
      <p>loading....</p>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <h1>app component</h1>
      <Suspense fallback={<FullSpinner />}>
        <Home />
      </Suspense>
    </div>
  );
}

编辑：

import React, { Suspense, lazy, useState, useEffect } from "react";

const Home = lazy(() => {
  return Promise.all([
    import("./home"),
    new Promise(resolve => setTimeout(resolve, 500))
  ]).then(([moduleExports]) => moduleExports);
});

function FullSpinner() {
  return (
    <div className="full-spinner">
      <p>loading....</p>
    </div>
  );
}

const LazyLoading = ({ delay, loader: Loader, children }) => {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    setTimeout(() => setReady(true), delay);
  }, [delay]);
  return ready ? (
    <Suspense fallback={<Loader />}>{children}</Suspense>
  ) : (
    <Loader />
  );
};

function App() {
  return (
    <div className="App">
      <h1>app component</h1>
      <LazyLoading delay={2000} loader={FullSpinner}>
        <Home />
      </LazyLoading>
    </div>
  );
}