如何实现初始页面加载动画？

【问题标题】：How do I implement initial page load animations?如何实现初始页面加载动画？
【发布时间】：2022-07-08 00:28:42
【问题描述】：

如何实现初始页面加载动画，一堆带有加载动画的灰色块，直到实际内容在 Next Js 中呈现。我有任何图书馆吗？

【问题讨论】：

标签： javascript reactjs animation next.js

【解决方案1】：

使用 React 18，使用 React.Suspense API 进行回退

https://reactjs.org/docs/react-api.html#reactsuspense

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

spinner 可以是一个由像这样的优秀资源构建的组件

https://skeletonreact.com/

更多选项