防止反应悬念隐藏内容

Question

我用谷歌搜索，观看了很多视频来实现类似 YouTube 加载的功能，如下面的屏幕截图所示。因此，我有基于路线的导航，其中有延迟加载，因此一切正常，但在加载内容时，反应悬念将使组件显示：无，因此它在屏幕上变得不可见，只有后备组件可见

我想保持内容可见，我将制作一个自定义后备组件，例如 youtube。

<Suspense fallback={<div>Loading...</div>}>
    {content}
</Suspense>

Answer 1

所以基本上我们要做的就是，将加载器包装在组件中（此处为 Loadable）并使用 Loadable 加载脚本。这样我们就可以保持现有内容可见，并且会在顶部显示很酷的加载动画。 在此示例中，您必须动态计算，或者可以使用不确定的线性进度，因为我们无法找到已加载的脚本的实际百分比。 （我添加了自定义类，以确保根据您的需要设置样式）

可加载.js

import React, { Suspense } from 'react';

// this will show the animation
const Loader = () => {
  return (
    <div className="position-fixed w-100 top-0 start-0 zindex-9999">
      <div style={{width:"{dynamic}%",height:"3px",background:"red"}}/>
    </div>
  );
};

const Loadable = (Component) => (props) => (
  <Suspense fallback={<Loader />}>
    <Component {...props} />
  </Suspense>
);

export default Loadable;

这是在routes.js中使用的方法

import React, { lazy } from 'react';
import Loadable from './components/Loadable';

// page import
const Dashboard = Loadable(lazy(() => import('./pages/dashboard')));

// define routes
const routes = [
    {
        path: "dashboard",
        element: <DashboardLayout />,
        children: [
            {
                path: "",
                element: <Dashboard />,
            },
        ]
    },
]