Reactで、データを読み込むあいだスケルトンを表示する方法

import type { CSSProperties } from 'react';

type SkeletonProps = {
  width?: CSSProperties['width'];
  height?: CSSProperties['height'];
  circle?: boolean;
};

// 灰色の帯や丸を1つ描く。大きさは、置き換わる中身に合わせて渡す
export function Skeleton({ width = '100%', height, circle = false }: SkeletonProps) {
  return (
    <span
      className="skeleton"
      style={{ width, height, borderRadius: circle ? '50%' : undefined }}
    />
  );
}

/* 骨組みの帯。文字の行と同じ行の中に、少し細い帯を置く */
.skeleton {
  display: inline-block;
  vertical-align: middle;
  height: 0.8em;
  border-radius: 4px;
  background: linear-gradient(90deg, #e3e8eb 25%, #f3f6f7 50%, #e3e8eb 75%) 0 0 / 200% 100%;
  animation: skeleton-shimmer 1.5s linear infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* 動きを減らす設定のときは、光が流れる動きを止める */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

import { use } from 'react';
import type { User } from './users';

export function UserList({ usersPromise }: { usersPromise: Promise<User[]> }) {
  const users = use(usersPromise);
  return (
    <ul className="user-list">
      {users.map((user) => (
        <li key={user.id} className="card">
          <span className="avatar" aria-hidden="true">{user.name[0]}</span>
          <div className="card-text">
            <p className="name">{user.name}</p>
            <p className="bio">{user.bio}</p>
          </div>
        </li>
      ))}
    </ul>
  );
}

import { Skeleton } from './Skeleton';

// UserList と同じ形のカードを、灰色の帯と丸で描く
export function UserListSkeleton({ count = 3 }: { count?: number }) {
  return (
    <div>
      <p role="status" className="visually-hidden">ユーザーの一覧を読み込み中です</p>
      <ul className="user-list" aria-hidden="true">
        {Array.from({ length: count }, (_, i) => (
          <li key={i} className="card">
            <Skeleton width={48} height={48} circle />
            <div className="card-text">
              <p className="name"><Skeleton width="30%" /></p>
              <p className="bio">
                <Skeleton />
                <Skeleton width="60%" />
              </p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const [usersPromise, setUsersPromise] = useState(load);
  return (
    <main className={noFix ? 'no-fix' : undefined}>
      <button type="button" onClick={() => setUsersPromise(load())}>
        再読み込み
      </button>
      <Suspense fallback={fallback}>
        <UserList usersPromise={usersPromise} />
      </Suspense>
      <p id="below">一覧の下にある段落です。</p>
    </main>
  );
}

押してから約100ms: 骨組みの帯 12個 / 丸いアイコン 3個（見えているもの 0個、一覧の ul の style 属性: display: none !important;）
押してから約900ms: 骨組みの帯 0個 / 丸いアイコン 3個（見えているもの 3個、一覧の ul の style 属性: ）

fallback=text
  読み込み中: 段落の上端 112px / カードの高さ []
  読み込み後: 段落の上端 376px / カードの高さ [92,92,92]
  layout-shift: 1件 合計 0.0181
fallback=skeleton
  読み込み中: 段落の上端 376px / カードの高さ [92,92,92]
  読み込み後: 段落の上端 376px / カードの高さ [92,92,92]
  layout-shift: 0件 合計 0.0000

skeleton 高さ 48px
name 高さ 24px
skeleton 高さ 12.8px
bio 高さ 42px
skeleton 高さ 11.19px
skeleton 高さ 11.19px

/* 紹介文は2行ぶんの高さに固定する（短くても長くても高さが変わらない） */
.bio {
  min-height: 3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

fallback=skeleton&short=1
  読み込み中: 段落の上端 376px / カードの高さ [92,92,92]
  読み込み後: 段落の上端 376px / カードの高さ [92,92,92]
  layout-shift: 0件 合計 0.0000
fallback=skeleton&short=1&fix=0
  読み込み中: 段落の上端 376px / カードの高さ [92,92,92]
  読み込み後: 段落の上端 358px / カードの高さ [74,92,92]
  layout-shift: 1件 合計 0.0011

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

[読み込み中]
- main:
  - button "再読み込み"
  - status: ユーザーの一覧を読み込み中です
  - paragraph: 一覧の下にある段落です。
[読み込み後]
- main:
  - button "再読み込み"
  - list:
    - listitem:
      - paragraph: たま
      - paragraph: 日当たりのよい窓辺で、午後はずっと寝ています。夜になると急に走り回ります。
    - listitem:
      - paragraph: みけ
      - paragraph: 段ボール箱を見つけると、必ず中に入ります。新しい箱ほど好きです。
    - listitem:
      - paragraph: くろ
      - paragraph: 朝ごはんの時間の10分前から、台所の前で待っています。
  - paragraph: 一覧の下にある段落です。

prefers-reduced-motion: no-preference → animation-name: skeleton-shimmer, animation-duration: 1.5s, 動いているアニメーション: 1件 / background-position 53.3419% 0px → -15.5515% 0px
prefers-reduced-motion: reduce → animation-name: none, animation-duration: 0s, 動いているアニメーション: 0件 / background-position 0px 0px → 0px 0px

fallback=skeleton 待ち時間50ms: 骨組みを描画 93ms / データが届いた 134ms / 一覧を表示 398ms（骨組みから 305ms）
fallback=skeleton 待ち時間150ms: 骨組みを描画 95ms / データが届いた 234ms / 一覧を表示 395ms（骨組みから 300ms）
fallback=skeleton 待ち時間1500ms: 骨組みを描画 58ms / データが届いた 1552ms / 一覧を表示 1562ms（骨組みから 1504ms）

fallback=delayed 待ち時間50ms: 骨組みを描画 68ms / データが届いた 113ms / 一覧を表示 377ms（骨組みから 309ms） / 骨組みが見え始めた 360ms
fallback=delayed 待ち時間150ms: 骨組みを描画 66ms / データが届いた 210ms / 一覧を表示 367ms（骨組みから 301ms） / 骨組みが見え始めた 350ms