Suspenseを使うと、データ取得中にスピナーや Loading…などを表示することができます。

JSON Placeholder(https://jsonplaceholder.typicode.com/)からデータを取得中に、Loading…と表示します。

まずは、データの取得、表示する PostData.jsx を作成します。

import React, { useState, useEffect } from "react"

const PostData = () => {
  const [data, setData] = useState()

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/")
      .then(response => response.json())
      .then(json => setData(json))
  }, [])

  return (
    <div>
      {data?.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

export default PostData

React のlazyを使って、PostData.jsx を遅延読み込みします。

function App() {
  const PostData = React.lazy(() => import("./PostData"));

SuspensePostDataを囲みます。

また、fallback<div>Loading...</div>を指定します。

function App() {
  const PostData = React.lazy(() => import("./PostData"))

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <PostData />
    </Suspense>
  )
}

では、動作確認します。

image2

ロード中に Loading…と出ました。

image3

データを取得後、表示することができました。

ブログ一覧