perf(ui): v2メディア一覧の表示・スクロールを高速化

[hmjn023]

v2メディア一覧の仮想行遅延生成、不要な更新抑制、ResizeObserver計測集約、レスポンシブWebPと画像優先度制御、サムネイルリトライ更新、スクロール位置のデバウンス保存・復元を実装しました。bun run check、UIユニットテスト、開発ギャラリーE2E 7/7で検証済みです。

Summary by CodeRabbit

• 改善
  • ページ移動後のスクロール位置を、より安定して保存・復元できるようになりました。
  • メディアグリッドの表示やサイズ変更時の更新を最適化し、スクロール中のパフォーマンスを改善しました。
  • サムネイル画像の読み込みを効率化しました。
  • 読み込みに失敗したサムネイルの再試行通知に対応し、復旧時の表示更新を改善しました。

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: fde0949e-36fa-4430-9bfb-f2dc1659a2de

📥 Commits

Reviewing files that changed from the base of the PR and between 4ad939c and 33f1a31.

📒 Files selected for processing (1)

• packages/ui/src/source-media-grid.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/ui/src/source-media-grid.tsx

---

📝 Walkthrough

Walkthrough

スクロール位置保存をデバウンスし、メディアグリッドの行取得と計測を更新しました。サムネイル再試行の購読通知と非同期画像デコード指定を追加しました。

Changes

UI動作更新

Layer / File(s)	Summary
スクロール位置保存 packages/ui/src/hooks/scroll-container.ts	スクロールイベントから位置保存を100ms遅延で実行します。対象コンテナ、ウィンドウ、ドキュメントを監視します。キー変更時とクリーンアップ時にタイマーとリスナーを解除します。
メディアグリッド仮想化と計測 packages/ui/src/source-media-grid.tsx	メディア行を行インデックス単位で取得します。仮想化状態は変更時のみ更新します。グリッド計測をrequestAnimationFrameで予約し、ResizeObserverと保留フレームをクリーンアップします。範囲未確定時は先頭メディアのfetchpriorityをhighに設定します。
サムネイル再試行通知と画像デコード packages/ui/src/thumbnail-source.ts, packages/ui/src/thumbnail-source.test.ts, packages/ui/src/thumbnail-image.tsx	サムネイル再試行の購読と解除を追加しました。再試行遅延後の通知をテストします。画像にdecoding="async"を追加しました。

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• hmjn023/solid-imager#646: source-media-grid.tsxの仮想化とレスポンシブ表示に関連します。
• hmjn023/solid-imager#657: scroll-container.tsのスクロール復元処理を拡張しています。
• hmjn023/solid-imager#610: サムネイル再試行購読とソースのライフサイクル管理に関連します。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	タイトルは、メディア一覧の表示とスクロールの高速化という変更の主目的を明確かつ簡潔に示しています。
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch perf/v2-media-gallery-performance

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/ui/src/thumbnail-source.test.ts (1)

72-73: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

onCleanup によるリスナー解放をテストで検証してください。

Line 72 で unsubscribe を先に実行するため、Line 109 の listeners.clear() がなくてもテストは成功します。購読解除とは別に、購読を残したまま dispose() を実行し、その後の再試行で listener が呼ばれないことを確認してください。

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/thumbnail-source.test.ts` around lines 72 - 73, Update the
test around unsubscribe and dispose to verify onCleanup releases listeners
independently of unsubscribe. Keep the subscription active when calling
dispose(), then trigger a subsequent retry and assert that listener is not
called; retain separate unsubscribe coverage if needed.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/ui/src/source-media-grid.tsx`:
- Around line 354-357: Update SourceMediaGrid’s ResizeObserver lifecycle so the
element assigned to mediaGridRef after mount is observed as soon as it exists,
including the pending-state path. Register the current grid element from the ref
assignment or reactive tracking, and disconnect or unobserve the previous
element when the reference changes; preserve scheduleMediaGridMetrics for
subsequent size updates and virtual-row rendering.

---

Nitpick comments:
In `@packages/ui/src/thumbnail-source.test.ts`:
- Around line 72-73: Update the test around unsubscribe and dispose to verify
onCleanup releases listeners independently of unsubscribe. Keep the subscription
active when calling dispose(), then trigger a subsequent retry and assert that
listener is not called; retain separate unsubscribe coverage if needed.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c35bc4a2-3959-4882-9165-fdef8107a481

📥 Commits

Reviewing files that changed from the base of the PR and between 620a4df and 4ad939c.

📒 Files selected for processing (5)

• packages/ui/src/hooks/scroll-container.ts
• packages/ui/src/source-media-grid.tsx
• packages/ui/src/thumbnail-image.tsx
• packages/ui/src/thumbnail-source.test.ts
• packages/ui/src/thumbnail-source.ts