Report
検索結果ページで何か検索した後(あるいはページ送りをした後)、ページネーションが非活性化しているように見える。
Root cause
SearchHeritageResultsContainer(client/src/app/features/search/containers/search-heritage-result-container.tsx:196-205)は、isLoading の間 pagination を常に null で渡している。
const baseProps = {
header,
onBackToAllSites: handleBackToAllSites,
items: [] as WorldHeritageVm[],
pagination: null,
};
if (isLoading) {
return <SearchResultsPage {...baseProps} pagination={null} rangeText="Loading…" />;
}
SearchResultsPage.tsx:104 側は pagination が null だとナビゲーション自体を描画しない。
{pagination ? (
<div className="mt-10 flex justify-center">
<Pagination ... />
</div>
) : null}
検索の送信(handleSubmit)やページ送り(handlePageChange)は URL の query params を変更するだけで、それを受けて useHeritageSearchQuery(client/src/app/features/search/hooks/use-search-heritage-query.ts)内の useEffect が発火し、フェッチ開始時に必ず setLoading(true) する。つまり検索条件を変えたときだけでなく、ページネーションのボタンをクリックしてページを送るたびに isLoading が一時的に true になり、その間ページネーション全体(Previous/Next/ページ番号ボタンすべて)が画面から消える。
「非活性化(disabled)」ではなく実際にはコンポーネントごとアンマウントされて一瞬消える動きだが、ユーザー視点では操作した直後にページネーションが効かなくなったように見える。
なお Pagination コンポーネント自体(client/src/app/features/top/components/Pagination.tsx:60)も lastPage <= 1 の場合は null を返す仕様になっており、検索結果が1ページ分しかない場合はそもそも非表示になる(これは意図した挙動)。今回の問題は、ローディング中に毎回消えてしまう方。
Repro steps
/heritages/results で、複数ページ分の結果が出る検索条件で検索する(例: 絞り込みなしに近い条件で last_page が2以上になるようにする)
- ページネーションが表示され、Next/ページ番号ボタンが押せることを確認する
- Next(または任意のページ番号)をクリックする
- クリックした瞬間、再フェッチが始まり
isLoading が true になるため、ページネーションのナビゲーションごと一瞬消える(ボタンが効かなくなったように見える)
- フェッチが完了すると再度表示されるが、毎回のページ送り・再検索でこの「消える」現象が繰り返される
Expected behavior
- ローディング中もページネーションの構造自体は表示を維持し、必要なら
disabled状態(押せないボタン)として見せるべき。現在ローディング時にdisabledpropを使わず、コンポーネント自体をアンマウントしているため不自然な点滅が起きている。
Suggested fix direction
SearchHeritageResultsContainer でローディング中も直前の pagination 値を保持しておき、Pagination に disabled={isLoading} を渡す形に変更する(pagination: null で丸ごと消すのではなく)。
Report
検索結果ページで何か検索した後(あるいはページ送りをした後)、ページネーションが非活性化しているように見える。
Root cause
SearchHeritageResultsContainer(client/src/app/features/search/containers/search-heritage-result-container.tsx:196-205)は、isLoadingの間paginationを常にnullで渡している。SearchResultsPage.tsx:104側はpaginationがnullだとナビゲーション自体を描画しない。検索の送信(
handleSubmit)やページ送り(handlePageChange)は URL の query params を変更するだけで、それを受けてuseHeritageSearchQuery(client/src/app/features/search/hooks/use-search-heritage-query.ts)内のuseEffectが発火し、フェッチ開始時に必ずsetLoading(true)する。つまり検索条件を変えたときだけでなく、ページネーションのボタンをクリックしてページを送るたびにisLoadingが一時的にtrueになり、その間ページネーション全体(Previous/Next/ページ番号ボタンすべて)が画面から消える。「非活性化(disabled)」ではなく実際にはコンポーネントごとアンマウントされて一瞬消える動きだが、ユーザー視点では操作した直後にページネーションが効かなくなったように見える。
なお
Paginationコンポーネント自体(client/src/app/features/top/components/Pagination.tsx:60)もlastPage <= 1の場合はnullを返す仕様になっており、検索結果が1ページ分しかない場合はそもそも非表示になる(これは意図した挙動)。今回の問題は、ローディング中に毎回消えてしまう方。Repro steps
/heritages/resultsで、複数ページ分の結果が出る検索条件で検索する(例: 絞り込みなしに近い条件でlast_pageが2以上になるようにする)isLoadingがtrueになるため、ページネーションのナビゲーションごと一瞬消える(ボタンが効かなくなったように見える)Expected behavior
disabled状態(押せないボタン)として見せるべき。現在ローディング時にdisabledpropを使わず、コンポーネント自体をアンマウントしているため不自然な点滅が起きている。Suggested fix direction
SearchHeritageResultsContainerでローディング中も直前のpagination値を保持しておき、Paginationにdisabled={isLoading}を渡す形に変更する(pagination: nullで丸ごと消すのではなく)。