React Routerのローダーで、表示する前にデータを読み込む方法

import { createRoot } from 'react-dom/client';
import { createBrowserRouter } from 'react-router';
import { RouterProvider } from 'react-router/dom';

const router = createBrowserRouter([
  {
    path: '/',
    loader: rootLoader,
    Component: Root,
    HydrateFallback: Loading,
    ErrorBoundary: ErrorPage,
    children: [
      { index: true, Component: Home },
      {
        path: 'cats/:catId',
        loader: catLoader,
        Component: CatPage,
        ErrorBoundary: ErrorPage,
        children: [{ path: 'meals', loader: mealsLoader, Component: Meals }],
      },
    ],
  },
]);

createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);

import { Link, Outlet, useLoaderData, type LoaderFunctionArgs } from 'react-router';

export async function catLoader({ params, request }: LoaderFunctionArgs) {
  const cat = await fetchCat(params.catId!, request.signal);
  // 見つからなかったときの処理は、後のエラーの節で足します
  return { cat };
}

export function CatPage() {
  const { cat } = useLoaderData<typeof catLoader>();
  return (
    <section>
      <h1>{cat.name}</h1>
      <p>毛の色：{cat.color}</p>
      <Link to={`/cats/${cat.id}/meals`}>ごはんの記録</Link>
      <Outlet />
    </section>
  );
}

errors/WrongField.tsx(6,18): error TS2551: Property 'nam' does not exist on type 'Cat'. Did you mean 'name'?

    7ms rootLoader: 開始
    7ms catLoader(1): 開始
    7ms mealsLoader(1): 開始
    7ms createRoot して描画を始める
   18ms Loading（HydrateFallback）を描画
  307ms rootLoader: 終了
  608ms catLoader(1): 終了
  808ms mealsLoader(1): 終了
  809ms router: state=idle location=/cats/1/meals
  812ms Root を描画（navigation.state = idle）
  815ms CatPage を描画（たま）
  816ms Meals を描画（2件）

  383ms router: state=loading location=/
  383ms catLoader(1): 開始
  390ms Root を描画（navigation.state = loading）
  983ms catLoader(1): 終了
  984ms router: state=idle location=/cats/1
  985ms Root を描画（navigation.state = idle）
  990ms CatPage を描画（たま）

import { Link, Outlet, useLoaderData, useNavigation } from 'react-router';

export function Root() {
  const { cats } = useLoaderData<typeof rootLoader>();
  const navigation = useNavigation();
  return (
    <div>
      <nav>
        {cats.map((cat) => (
          <Link key={cat.id} to={`/cats/${cat.id}`}>
            {cat.name}
          </Link>
        ))}
      </nav>
      {navigation.state === 'loading' && <p className="pending">読み込み中…</p>}
      <Outlet />
    </div>
  );
}

import { data } from 'react-router';

export async function catLoader({ params, request }: LoaderFunctionArgs) {
  const cat = await fetchCat(params.catId!, request.signal);
  if (!cat) {
    throw data('猫が見つかりません', { status: 404 });
  }
  return { cat };
}

import { isRouteErrorResponse, useRouteError } from 'react-router';

export function ErrorPage() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    return (
      <p role="alert">
        {error.status}：{error.data}
      </p>
    );
  }
  const message = error instanceof Error ? error.message : '不明なエラー';
  return <p role="alert">エラー：{message}</p>;
}

  389ms catLoader(2): 開始
  396ms Root を描画（navigation.state = loading）
  519ms fetchCat(2): 中止された（signal.aborted = true）
  519ms router: state=loading location=/
  519ms catLoader(3): 開始
  529ms Root を描画（navigation.state = loading）
 1120ms catLoader(3): 終了
 1120ms router: state=idle location=/cats/3
 1121ms Root を描画（navigation.state = idle）
 1122ms CatPage を描画（しろ）