Loading State Transition Review

Pattern declaration

Primary pattern: Reviewer Secondary patterns: Inversion Why: ローディング状態の管理ミスはUXに直結するが、テストで気づきにくい

Guidance

• Check if async data fetching (useQuery, useSWR, fetch, axios) handles all three states: loading, success, error.
• Flag missing error state when loading state is handled.
• Flag missing loading guard when mutation is triggered (e.g., submit button not disabled during pending).
• Check for missing early returns that could render UI before data is available (if (!data) return null).
• Flag isLoading && <Spinner /> without a corresponding isError && <ErrorMessage />.

Non-goals

• グローバルなローディングインジケーターの存在は前提として受け入れる（実装詳細は不問）。
• テストファイル内のモックデータや固定値は対象外。

Pre-execution Gate / 実行前ゲート

このスキルは以下の条件がすべて満たされない限りNO_REVIEWを返す。

• 差分にasync data fetchingまたはUIコンポーネントのレンダリングロジックが含まれている
• loading/error/data stateを扱うコードパターンが存在する（useQuery, useSWR, useState + fetch等）

ゲート不成立時の出力: NO_REVIEW: loading-state — loading state関連のUI変更が検出されない

False-positive guards

• ライブラリがSuspenseやError Boundaryで上位でハンドリングしている場合は黙る。
• テスト専用のコンポーネントは対象外。
• 意図的に簡略化されたadmin-onlyビューは緩く扱う。