React18のsuspenseとtransitionの組み合わせ

App.tsx

import React, {Suspense, useState, useTransition} from 'react';
import {ErrorBoundary} from "react-error-boundary";
import AlbumList from "./AlbumList.tsx";
import Sidebar from "./Sidebar.tsx";
import TodoList from "./TodoList.tsx";

type Tabs = "todo" | "album";

const ReactQuery = () => {
  const [selectedTab, setSelectedTab] = useState<Tabs>("todo");
  const [isPending, startTransition] = useTransition();

  const buttonStyle = {
    padding: "12px",
    fontSize: "16px",
    border: "none",
    opacity: isPending ? 0.5 : 1
  }
  const albumButtonStyle = {
    ...buttonStyle,
    background: selectedTab === "album" ? "royalblue" : "white",
    color: selectedTab === "album" ? "white" : "black"
  }
  const todoButtonStyle = {
    ...buttonStyle,
    background: selectedTab === "todo" ? "royalblue" : "white",
    color: selectedTab === "todo" ? "white" : "black"
  }

  const onClickTabButton = (tab:Tabs) => {
    startTransition(() => {
      setSelectedTab(tab);
    })
  }

  return (
    <>
      <p>ReactQuery</p>

      <div style={{display: "flex", padding: "16px"}}>
        <Sidebar />

        <div style={{flexGrow: 1}}>
          <button style={todoButtonStyle} onClick={() => onClickTabButton("todo")}>todo</button>
          <button style={albumButtonStyle} onClick={() => onClickTabButton("album")}>Album</button>

          <ErrorBoundary fallback={<p>todo or album リストエラーです</p>}>
            <Suspense fallback={<p>todo or albumリストローディング中</p>}>
              {selectedTab === "todo" ? <TodoList /> : <AlbumList />}
            </Suspense>
          </ErrorBoundary>
        </div>
      </div>
    </>
  );
};

export default ReactQuery;