Merge pull request #80 from codeforjapan/fix/disable-button-while-moving-page

fix:disable button while moving page

Author: sushichan044

app/feature/search/components/SearchPagination.tsx

@@ -9,6 +9,7 @@ import Fa6SolidAngleLeft from "~icons/fa6-solid/angle-left";
 import Fa6SolidAngleRight from "~icons/fa6-solid/angle-right";
 
 import type { PaginationMeta } from "../../../generated/api/schemas/paginationMeta";
+import { useNetworkBusy } from "../../../hooks/useNetworkBusy";
 import { buildPaginationMeta } from "../pagination";
 import type { noteSearchParamSchema } from "../validation";
 
@@ -29,6 +30,8 @@ export const SearchPagination = ({
   visibleItemCount,
   ...groupProps
 }: PaginationProps) => {
+  const isNetworkBusy = useNetworkBusy();
+
   const pagination = buildPaginationMeta(meta, currentQuery);
 
   const pageFirstItemIndex = currentQuery.offset + 1;
@@ -66,6 +69,7 @@ export const SearchPagination = ({
           aria-label="前のページへ移動する"
           color="pink"
           component={Link}
+          disabled={isNetworkBusy}
           loading={prevLoading}
           onClick={handlePrevClick}
           to={prevTo}
@@ -83,6 +87,7 @@ export const SearchPagination = ({
           aria-label="次のページへ移動する"
           color="pink"
           component={Link}
+          disabled={isNetworkBusy}
           loading={nextLoading}
           onClick={handleNextClick}
           to={nextTo}

app/hooks/useNetworkBusy.ts

@@ -0,0 +1,15 @@
+import { useFetchers, useNavigation } from "react-router";
+
+/**
+ * Check if any network request is in progress.
+ *
+ * This is useful for loading indicators or disabling buttons while a request is being made.
+ *
+ * @returns `true` if any network request is in progress, `false` otherwise.
+ */
+export const useNetworkBusy = () => {
+  const navigation = useNavigation();
+  const fetcher = useFetchers();
+
+  return navigation.state !== "idle" || fetcher.some((f) => f.state !== "idle");
+};

app/routes/_index.tsx

@@ -1,6 +1,6 @@
 import { parseWithZod } from "@conform-to/zod";
 import { Anchor, Card, Container, Divider, Group, Stack } from "@mantine/core";
-import { data, Link, redirect, useNavigation } from "react-router";
+import { data, Link, redirect } from "react-router";
 import { getQuery, withQuery } from "ufo";
 
 import Fa6SolidMagnifyingGlass from "~icons/fa6-solid/magnifying-glass";
@@ -14,6 +14,7 @@ import {
   searchApiV1DataSearchGet,
 } from "../generated/api/client";
 import type { SearchedNote, Topic } from "../generated/api/schemas";
+import { useNetworkBusy } from "../hooks/useNetworkBusy";
 import type { Route } from "./+types/_index";
 
 export const meta: Route.MetaFunction = () => {
@@ -88,7 +89,7 @@ export default function Index({
   actionData,
   loaderData,
 }: Route.ComponentProps) {
-  const isLoadingSearchResults = useNavigation().state !== "idle";
+  const isNetworkBusy = useNetworkBusy();
 
   const {
     topics,
@@ -127,7 +128,7 @@ export default function Index({
                       <SearchPagination
                         className="ms-auto me-0"
                         currentQuery={searchQuery}
-                        loading={isLoadingSearchResults}
+                        loading={isNetworkBusy}
                         meta={paginationMeta}
                         visibleItemCount={notes.length}
                       />
@@ -144,7 +145,7 @@ export default function Index({
                       <SearchPagination
                         className="ms-auto me-0"
                         currentQuery={searchQuery}
-                        loading={isLoadingSearchResults}
+                        loading={isNetworkBusy}
                         meta={paginationMeta}
                         visibleItemCount={notes.length}
                       />