React Routerで、ページを移るあいだの読み込み表示を出す方法

// routes.tsx（一部）
import { NavLink, Outlet, useNavigation } from 'react-router';

function PendingBar() {
  const navigation = useNavigation();
  const isNavigating = Boolean(navigation.location);
  if (!isNavigating) return null;
  return (
    <div className="pending-bar" role="status">
      読み込み中：{navigation.location?.pathname}
    </div>
  );
}

export function Root() {
  return (
    <div>
      <PendingBar />
      <nav className="menu">
        <NavLink to="/cats">猫</NavLink>
        <NavLink to="/cats/1">
          {({ isPending }) => <>たま{isPending && <span className="spinner">…</span>}</>}
        </NavLink>
        <NavLink to="/news">お知らせ</NavLink>
        <NavLink to="/diary">日記</NavLink>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

// main.tsx（一部）
const router = createBrowserRouter([
  {
    path: '/',
    Component: Root,
    children: [
      { index: true, Component: Home },
      { path: 'cats', Component: CatIndex },
      { path: 'cats/:catId', loader: catLoader, Component: CatPage },
      { path: 'news', loader: newsLoader, Component: NewsPage },
      { path: 'diary', loader: diaryLoader, Component: DiaryPage },
    ],
  },
]);

    0ms 「たま」をクリック
    7ms PendingBar を描画（state=loading、行き先=/cats/1、バー=表示）
   10ms [画面] URL=/ 画面=ホーム バー=読み込み中：/cats/1 猫のclass=pending たまのclass=pending たまの表示=たま… 日記=-
  907ms PendingBar を描画（state=idle、行き先=なし、バー=なし）
  910ms [画面] URL=/cats/1 画面=たま バー=なし 猫のclass=active たまのclass=active たまの表示=たま 日記=-

   10ms [画面] URL=/ 画面=ホーム バー=読み込み中：/cats/1 猫のclass=pending たまのclass=pending たまの表示=たま… 日記=-

<NavLink to="/cats" end>
  猫
</NavLink>

   10ms [画面] URL=/ 画面=ホーム バー=読み込み中：/cats/1 猫のclass=(なし) たまのclass=pending たまの表示=たま… 日記=-

    0ms 「お知らせ」をクリック
   12ms [画面] URL=/ 画面=ホーム バー=読み込み中：/news 猫のclass=(なし) たまのclass=(なし) たまの表示=たま 日記=-
   90ms [画面] URL=/news 画面=お知らせ バー=なし 猫のclass=(なし) たまのclass=(なし) たまの表示=たま 日記=-

// useDelayedFlag.ts
import { useEffect, useState } from 'react';

// flag が true のまま delay ミリ秒たってから true を返す
export function useDelayedFlag(flag: boolean, delay: number) {
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!flag) {
      setShown(false);
      return;
    }
    const id = setTimeout(() => setShown(true), delay);
    return () => clearTimeout(id);
  }, [flag, delay]);
  return flag && shown;
}

import { useDelayedFlag } from './useDelayedFlag';

function PendingBar() {
  const navigation = useNavigation();
  const isNavigating = Boolean(navigation.location);
  const show = useDelayedFlag(isNavigating, 150);
  if (!show) return null;
  return (
    <div className="pending-bar" role="status">
      読み込み中：{navigation.location?.pathname}
    </div>
  );
}

    0ms 「お知らせ」をクリック
    7ms PendingBar を描画（state=loading、行き先=/news、バー=なし）
   88ms PendingBar を描画（state=idle、行き先=なし、バー=なし）
   92ms [画面] URL=/news 画面=お知らせ バー=なし 猫のclass=(なし) たまのclass=(なし) たまの表示=たま 日記=-

    0ms 「たま」をクリック
   13ms [画面] URL=/ 画面=ホーム バー=なし 猫のclass=pending たまのclass=pending たまの表示=たま… 日記=-
  167ms [画面] URL=/ 画面=ホーム バー=読み込み中：/cats/1 猫のclass=pending たまのclass=pending たまの表示=たま… 日記=-
  911ms [画面] URL=/cats/1 画面=たま バー=なし 猫のclass=active たまのclass=active たまの表示=たま 日記=-

import { Suspense } from 'react';
import { Await, useLoaderData } from 'react-router';

export async function diaryLoader() {
  // 日記の中身は待たずに Promise のまま返す
  const entries = fetchDiaryEntries();
  const title = await fetchDiaryTitle();
  return { title, entries };
}

export function DiaryPage() {
  const { title, entries } = useLoaderData<typeof diaryLoader>();
  return (
    <>
      <h1>{title}</h1>
      <Suspense fallback={<p className="skeleton">日記を読み込み中…</p>}>
        <Await resolve={entries}>
          {(list) => (
            <ul>
              {list.map((d) => (
                <li key={d.date}>
                  {d.date} {d.text}
                </li>
              ))}
            </ul>
          )}
        </Await>
      </Suspense>
    </>
  );
}

    0ms 「日記」をクリック
  108ms PendingBar を描画（state=idle、行き先=なし、バー=なし）
  113ms [画面] URL=/diary 画面=たまの日記 バー=なし 猫のclass=(なし) たまのclass=(なし) たまの表示=たま 日記=読み込み中…
 1209ms [画面] URL=/diary 画面=たまの日記 バー=なし 猫のclass=(なし) たまのclass=(なし) たまの表示=たま 日記=中身