Реагировать Ленивая загрузка не отображается Загрузка и отображение всех компонентов одновременно

Question

Я пытаюсь реализовать анимацию заполнителя так же, как YouTube. Я использую React Lazy и Suspense для этого. Но ленивая загрузка не показывает загрузку и прямую загрузку компонентов. Я безуспешно пытался ограничить соединение inte rnet с помощью вкладки сети. Я прилагаю свой код. Спасибо!

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;