feat(ui): 共通の非同期状態UIを整備する (#579) - #599
Conversation
|
Warning Review limit reached
Next review available in: 28 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough変更共有のスケルトン、Empty/Error/Offline状態、再試行UIを追加し、ServerとTauriの設定・検索・ソース・メディア詳細画面へ適用しました。ルートのpending表示、非同期クエリ状態、アクセシビリティ属性、ローディング回復のE2E検証も更新されています。 共有非同期状態UI
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/ui/src/screens/search-screen.tsx (1)
107-117: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winフィルター取得失敗バナーのマークアップが2画面で重複しています。 どちらも「警告枠＋文言＋
RetryButton」という同一構造で、共通コンポーネント（例:async-state.tsxへのFilterErrorBanner追加）に切り出せます。
packages/ui/src/screens/search-screen.tsx#L107-L117: このブロックを共通のFilterErrorBannerコンポーネントに置き換え、labelとonRetryのみを渡す形にする。packages/ui/src/screens/source-media-screen.tsx#L127-L136: 同様に共通のFilterErrorBannerコンポーネントへ差し替え、onRetry={props.onRetryFilters}を渡す形にする。🤖 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/screens/search-screen.tsx` around lines 107 - 117, 重複しているフィルター取得失敗バナーを共通化する。`packages/ui/src/screens/search-screen.tsx#L107-L117`と`packages/ui/src/screens/source-media-screen.tsx#L127-L136`の警告マークアップを`async-state.tsx`の`FilterErrorBanner`コンポーネントへ置き換え、各画面から適切な`label`と再試行コールバック（`page().retryFilters`または`props.onRetryFilters`）だけを渡す。
🤖 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.
Nitpick comments:
In `@packages/ui/src/screens/search-screen.tsx`:
- Around line 107-117:
重複しているフィルター取得失敗バナーを共通化する。`packages/ui/src/screens/search-screen.tsx#L107-L117`と`packages/ui/src/screens/source-media-screen.tsx#L127-L136`の警告マークアップを`async-state.tsx`の`FilterErrorBanner`コンポーネントへ置き換え、各画面から適切な`label`と再試行コールバック（`page().retryFilters`または`props.onRetryFilters`）だけを渡す。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 75910c3d-dd98-403b-a1c0-eab8a2438241
📒 Files selected for processing (28)
apps/server/src/components/api-activity-indicator.tsxapps/server/src/routes/config.tsxapps/server/src/routes/manager.tsxapps/server/src/routes/search.tsxapps/server/src/routes/sources/$mediaSourceId/$mediaId/index.tsxapps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsxapps/server/src/routes/sources/$mediaSourceId/index.tsxapps/server/src/routes/sources/index.tsxapps/server/src/tests/e2e/loading-recovery.spec.tsapps/tauri/src/main.tsxapps/tauri/src/routes/config.tsxapps/tauri/src/routes/sources/$mediaSourceId/$mediaId/index.tsxapps/tauri/src/routes/sources/index.tsxpackages/ui/src/async-state.tsxpackages/ui/src/hooks/use-manager-page.tspackages/ui/src/hooks/use-search-page.tspackages/ui/src/query-state.test.tspackages/ui/src/router-status.tsxpackages/ui/src/screen-skeleton.tsxpackages/ui/src/screens/config-state-screen.tsxpackages/ui/src/screens/manager-screen.tsxpackages/ui/src/screens/media-detail-screen.tsxpackages/ui/src/screens/search-screen.tsxpackages/ui/src/screens/source-media-screen.tsxpackages/ui/src/screens/sources-screen.tsxpackages/ui/src/skeleton.tsxpackages/ui/src/source-media-grid.tsxpackages/ui/src/source-media-page.tsx
|
CodeRabbit のnitpickに対応しました。Search と Source Media のフィルター取得失敗バナーを packages/ui/src/async-state.tsx の FilterErrorBanner へ共通化し、文言と再試行処理だけを各画面から渡す形にしています。追コミット: 9e54a60。検証: Biome、全workspace typecheck、UI unit 43件、dev loading-recovery E2E 11件。 |
1 participant
概要
Issue #579 の共通Skeleton・Empty・Error・Offline・Retry UIを実装し、Server/Tauriの主要6画面へ適用しました。初回loadingだけをSkeletonにし、background fetchでは既存コンテンツと入力・focusを維持します。
変更内容
検証
補足
rootの vp check / vp test は既存のVite+ root解決問題で解析開始前に失敗するため、package別check/testとfresh production buildで検証しています。詳細はIssueのReview Checklistに記録しました。
Closes #579
Summary by CodeRabbit