useTransitionで、前の画面を残したまま読み込みを待つ方法

// 検証用のデータ取得。finish(key) を呼ぶまで Promise は解決しない。
const cache = new Map<string, { promise: Promise<string>; resolve: (v: string) => void }>();

export function fetchData(key: string): Promise<string> {
  let entry = cache.get(key);
  if (!entry) {
    let resolve!: (v: string) => void;
    const promise = new Promise<string>((r) => (resolve = r));
    entry = { promise, resolve };
    cache.set(key, entry); // 同じ key には同じ Promise を返す
  }
  return entry.promise;
}

export function finish(key: string, value: string) {
  fetchData(key);
  cache.get(key)!.resolve(value);
}

import { Suspense, use } from 'react';
import { fetchData } from './data';

export function About() {
  return <p id="about">プロフィール</p>;
}

export function Posts() {
  const posts = use(fetchData('posts'));
  return (
    <div>
      <p id="posts">{posts}</p>
      <Suspense fallback={<p id="comments-fallback">コメントを読み込み中…</p>}>
        <Comments />
      </Suspense>
    </div>
  );
}

function Comments() {
  const comments = use(fetchData('comments'));
  return <p id="comments">{comments}</p>;
}

import { Suspense, useState } from 'react';
import { About, Posts } from './Pages';

type Tab = 'about' | 'posts';

export function Tabs() {
  const [tab, setTab] = useState<Tab>('about');

  return (
    <>
      <button id="to-posts" onClick={() => setTab('posts')}>投稿</button>
      <Suspense fallback={<p id="fallback">読み込み中…</p>}>
        {tab === 'about' ? <About /> : <Posts />}
      </Suspense>
    </>
  );
}

$ node run.mjs ./out/TabsPlain.mjs
./out/TabsPlain.mjs
  1. 最初の表示: プロフィール
  2. 「投稿」を押した直後: 読み込み中…
  3. 投稿のデータが届いた: 投稿の一覧 / コメントを読み込み中…
  4. コメントのデータが届いた: 投稿の一覧 / コメントの一覧

import { Suspense, useState, useTransition } from 'react';
import { About, Posts } from './Pages';

type Tab = 'about' | 'posts';

export function Tabs() {
  const [tab, setTab] = useState<Tab>('about');
  const [isPending, startTransition] = useTransition();

  function selectTab(next: Tab) {
    startTransition(() => {
      setTab(next);
    });
  }

  return (
    <>
      <button id="to-posts" onClick={() => selectTab('posts')}>投稿</button>
      {isPending && <span id="pending">切り替え中…</span>}
      <Suspense fallback={<p id="fallback">読み込み中…</p>}>
        <div style={{ opacity: isPending ? 0.5 : 1 }}>
          {tab === 'about' ? <About /> : <Posts />}
        </div>
      </Suspense>
    </>
  );
}

$ node run.mjs ./out/TabsTransition.mjs
./out/TabsTransition.mjs
  1. 最初の表示: プロフィール
  2. 「投稿」を押した直後: 切り替え中… / プロフィール(薄く)
  3. 投稿のデータが届いた: 投稿の一覧 / コメントを読み込み中…
  4. コメントのデータが届いた: 投稿の一覧 / コメントの一覧

import { Suspense, use, useState, useTransition } from 'react';
import { fetchData } from './data';

function Bio({ userId }: { userId: string }) {
  const bio = use(fetchData(`bio-${userId}`));
  return <p id="bio">{bio}</p>;
}

function ProfilePage({ userId }: { userId: string }) {
  return (
    <Suspense fallback={<p id="fallback">読み込み中…</p>}>
      <Bio userId={userId} />
    </Suspense>
  );
}

export function App({ withKey }: { withKey: boolean }) {
  const [userId, setUserId] = useState('a');
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <button id="next" onClick={() => startTransition(() => setUserId('b'))}>次の人</button>
      {isPending && <span id="pending">切り替え中…</span>}
      {withKey ? <ProfilePage key={userId} userId={userId} /> : <ProfilePage userId={userId} />}
    </>
  );
}

$ node profile.mjs
key なし
  1. a さんを表示: a さんの紹介
  2. 「次の人」を押した直後: 切り替え中… / a さんの紹介
  3. b さんのデータが届いた: b さんの紹介

$ node profile.mjs key
key={userId} あり
  1. a さんを表示: a さんの紹介
  2. 「次の人」を押した直後: 読み込み中…
  3. b さんのデータが届いた: b さんの紹介