Skip to content

bug: 検索結果のページネーションが検索/ページ送りのたびに一瞬非表示になる #386

Description

@zigzagdev

Report

検索結果ページで何か検索した後(あるいはページ送りをした後)、ページネーションが非活性化しているように見える。

Root cause

SearchHeritageResultsContainerclient/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 側は paginationnull だとナビゲーション自体を描画しない。

{pagination ? (
  <div className="mt-10 flex justify-center">
    <Pagination ... />
  </div>
) : null}

検索の送信(handleSubmit)やページ送り(handlePageChange)は URL の query params を変更するだけで、それを受けて useHeritageSearchQueryclient/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

  1. /heritages/results で、複数ページ分の結果が出る検索条件で検索する(例: 絞り込みなしに近い条件で last_page が2以上になるようにする)
  2. ページネーションが表示され、Next/ページ番号ボタンが押せることを確認する
  3. Next(または任意のページ番号)をクリックする
  4. クリックした瞬間、再フェッチが始まり isLoadingtrue になるため、ページネーションのナビゲーションごと一瞬消える(ボタンが効かなくなったように見える)
  5. フェッチが完了すると再度表示されるが、毎回のページ送り・再検索でこの「消える」現象が繰り返される

Expected behavior

  • ローディング中もページネーションの構造自体は表示を維持し、必要ならdisabled状態(押せないボタン)として見せるべき。現在ローディング時にdisabledpropを使わず、コンポーネント自体をアンマウントしているため不自然な点滅が起きている。

Suggested fix direction

  • SearchHeritageResultsContainer でローディング中も直前の pagination 値を保持しておき、Paginationdisabled={isLoading} を渡す形に変更する(pagination: null で丸ごと消すのではなく)。

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions