reactjs - 反应延迟加载不显示加载并一次显示所有组件

Question

我正在尝试实现一个类似于 YouTube 所做的占位符动画。我正在使用 React Lazy 和 Suspense 道具来实现它。但是延迟加载不显示加载和直接加载组件。我试图通过网络选项卡限制我的互联网连接，但没有成功。我附上我的代码。谢谢！

const Posts = lazy(() => import("./posts/posts"));
const Updates = lazy(() => import("../dashboard/updates/updates"));
const Navigation = lazy(() => import("../dashboard/navigation/navigation"));

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 1000));
}

class PinnedPosts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pinned_posts: true,
    };
  }

  render() {
    return (
      <div className="pinned-posts">
        <div className="navigation">
          <Suspense fallback={<div>Loading..</div>}>
            <Navigation posts={this.state.pinned_posts}></Navigation>
          </Suspense>
        </div>
        <Suspense fallback={<div>Loading!</div>}>
          <div className="news">
            <h1 class="Pinned-post">Pinned Posts</h1>
            <Posts />
          </div>

        <div className="promotions">
          <h1 class="organization-update">Organization Updates</h1>
          <Updates></Updates>
        </div>
        </Suspense>

      </div>
    );
  }
}

export default PinnedPosts;

标签： reactjsloading