Suspense

// React.lazy 一般用来做代码分割, 且必须放到 suspense 下面
const OtherComponent = React.lazy(() => import('./OtherComponent'));
// 只要放到 suspense 下面就可以，不一定是直接子级。 fallback 接受任意的 react element, 表示等待下面的组件加载的时候显示的内容。
function MyComponent() {
  return (
    // Displays  until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}