Add loading indicator on paged list

pookmish · Jul 10, 2024 · 6524635 · 6524635
1 parent 16923c5
commit 6524635
Show file tree

Hide file tree

Showing 4 changed files with 583 additions and 1,529 deletions.
diff --git a/package.json b/package.json
@@ -15,10 +15,10 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@heroicons/react": "^2.1.4",
+    "@heroicons/react": "^2.1.5",
     "@js-temporal/polyfill": "^0.4.4",
     "@mui/base": "5.0.0-dev.20240529-082515-213b5e33ab",
-    "@next/third-parties": "^14.2.4",
+    "@next/third-parties": "^14.2.5",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
@@ -30,13 +30,13 @@
     "decanter": "^7.3.0",
     "drupal-jsonapi-params": "^2.3.1",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint-config-next": "^14.2.5",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
-    "next": "^14.2.4",
+    "next": "^14.2.5",
     "next-drupal": "^1.6.0",
     "postcss": "^8.4.39",
     "qs": "^6.12.3",
@@ -59,14 +59,14 @@
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.3",
-    "@next/bundle-analyzer": "^14.2.4",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
+    "@next/bundle-analyzer": "^14.2.5",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/nextjs": "^8.1.11",
-    "@storybook/react": "^8.1.11",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/nextjs": "^8.2.1",
+    "@storybook/react": "^8.2.1",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
@@ -77,7 +77,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.1",
     "storybook-addon-module-mock": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },

diff --git a/src/components/elements/paged-list.tsx b/src/components/elements/paged-list.tsx
@@ -7,6 +7,9 @@ import {useRouter, useSearchParams} from "next/navigation"
 import usePagination from "@lib/hooks/usePagination"
 import useFocusOnRender from "@lib/hooks/useFocusOnRender"
 import {ArrowLongLeftIcon, ArrowLongRightIcon} from "@heroicons/react/20/solid"
+import {ArrowPathIcon} from "@heroicons/react/16/solid"
+import {twMerge} from "tailwind-merge"
+import useServerAction from "@lib/hooks/useServerAction"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   /**
@@ -38,32 +41,37 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pagerSiblingCount = 2, loadPage, ...props}: Props) => {
   const ref = useRef(false)
   const [items, setItems] = useState<JSX.Element[]>(Array.isArray(children) ? children : [children])
+  const [runAction, isRunning] = useServerAction<[number], JSX.Element>(loadPage)
 
   const router = useRouter()
   const searchParams = useSearchParams()
 
   // Use the GET param for page, but make sure that it is between 1 and the last page. If it's a string or a number
   // outside the range, fix the value, so it works as expected.
-  const {count: currentPage, setCount: setPage} = useCounter(Math.max(1, parseInt(searchParams.get(pageKey || "") || "") || 1))
+  const {count: currentPage, setCount: setPage} = useCounter(Math.min(totalPages, pageKey ? Math.max(1, parseInt(searchParams.get(pageKey) || "")) : 1))
   const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)
 
   const focusItemRef = useRef<HTMLLIElement>(null)
   const [animationParent] = useAutoAnimate<HTMLUListElement>()
 
   const goToPage = useCallback(
-    async (page: number, doNotFocusOnResults?: boolean) => {
-      if (loadPage) {
-        loadPage(page - 1)
-          .then(response => {
+    (page: number, doNotFocusOnResults?: boolean) => {
+      runAction(page - 1)
+        .then(response => {
+          if (response) {
+            // Set the rendering to the response from the server. If the response has a suspense boundary, it will have a
+            // fallback prop. Then we only want to render the list of children within the suspense.
             setItems(response.props.fallback ? response.props.children.props.children : response.props.children)
 
+            // When loading a page during the initial page load, we don't want to focus on anything. But when a user changes
+            // pages, we want to focus on the first element.
             if (!doNotFocusOnResults) enableFocusElement()
             setPage(page)
-          })
-          .catch(() => console.warn("An error occurred fetching more results."))
-      }
+          }
+        })
+        .catch(() => console.warn("An error occurred fetching more results."))
     },
-    [enableFocusElement, setPage, loadPage]
+    [enableFocusElement, setPage, runAction]
   )
 
   const setFocusOnItem = useFocusOnRender(focusItemRef, false)
@@ -87,15 +95,29 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
   }, [loadPage, router, currentPage, pageKey, searchParams])
 
   useEffect(() => {
-    const initialPage = parseInt(searchParams.get(pageKey || "") || "")
-    if (initialPage > 1 && !ref.current) goToPage(initialPage, true)
+    if (currentPage > 1 && !ref.current) {
+      goToPage(currentPage, true)
+    }
     ref.current = true
-  }, [searchParams, pageKey, loadPage, goToPage])
+  }, [currentPage, goToPage])
 
   const paginationButtons = usePagination(totalPages * items.length, currentPage, items.length, pagerSiblingCount)
 
   return (
-    <div {...props}>
+    <div
+      {...props}
+      className={twMerge("relative", props.className)}
+    >
+      {isRunning && (
+        <div className="absolute left-0 top-0 z-10 h-full w-full rounded-2xl bg-black-20 bg-opacity-30">
+          <div className="absolute bottom-20 left-1/2 -translate-x-1/2">
+            <ArrowPathIcon
+              className="animate-spin"
+              width={50}
+            />
+          </div>
+        </div>
+      )}
       <ul
         {...ulProps}
         ref={animationParent}
@@ -127,6 +149,7 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
                 total={totalPages}
                 onPageClick={goToPage}
                 pagerSiblingCount={pagerSiblingCount}
+                disabled={isRunning}
               />
             ))}
           </ul>
@@ -136,7 +159,7 @@ const PagedList = ({children, ulProps, liProps, pageKey = "page", totalPages, pa
   )
 }
 
-const PaginationButton = ({page, currentPage, total, onPageClick, pagerSiblingCount}: {page: number | string; currentPage: number; total: number; onPageClick: (_page: number) => void; pagerSiblingCount: number}) => {
+const PaginationButton = ({page, currentPage, total, onPageClick, pagerSiblingCount, disabled}: {page: number | string; currentPage: number; total: number; onPageClick: (_page: number) => void; pagerSiblingCount: number; disabled: boolean}) => {
   if (page === 0) {
     return (
       <li className="mt-auto h-full">
@@ -166,6 +189,7 @@ const PaginationButton = ({page, currentPage, total, onPageClick, pagerSiblingCo
         className="group text-m2 font-medium hocus:underline"
         onClick={handleClick}
         aria-current={isCurrent ? "page" : undefined}
+        disabled={disabled}
       >
         <span className="sr-only">
           {page === "leftArrow" && "Go to first page"}

diff --git a/src/lib/hooks/useServerAction.tsx b/src/lib/hooks/useServerAction.tsx
@@ -0,0 +1,43 @@
+import {useState, useEffect, useTransition, useRef} from "react"
+import {useBoolean} from "usehooks-ts"
+
+/**
+ * Call a server action and provide a pending state while the process is running.
+ *
+ * @see https://github.com/vercel/next.js/discussions/51371#discussioncomment-8671340
+ *
+ * @param action
+ * @param onFinished
+ */
+const useServerAction = <P extends any[], R>(action?: (..._args: P) => Promise<R>, onFinished?: (_: R | undefined) => void): [(..._args: P) => Promise<R | undefined>, boolean] => {
+  const [isPending, startTransition] = useTransition()
+  const [result, setResult] = useState<R>()
+  const {value: finished, setTrue: setFinished} = useBoolean(false)
+  const resolver = useRef<(_value?: R | PromiseLike<R>) => void>()
+
+  useEffect(() => {
+    if (!finished) return
+
+    if (onFinished) onFinished(result)
+    resolver.current?.(result)
+  }, [result, finished, onFinished])
+
+  const runAction = async (...args: P): Promise<R | undefined> => {
+    startTransition(() => {
+      if (action) {
+        action(...args).then(data => {
+          setResult(data)
+          setFinished()
+        })
+      }
+    })
+
+    return new Promise(resolve => {
+      resolver.current = resolve
+    })
+  }
+
+  return [runAction, isPending]
+}
+
+export default useServerAction