add some loading indicators to detail pages

adsabs · Oct 4, 2024 · a597cdd · a597cdd
1 parent 37f94ba
commit a597cdd
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 14 deletions.
diff --git a/src/components/AbstractRefList/AbstractRefList.tsx b/src/components/AbstractRefList/AbstractRefList.tsx
@@ -28,6 +28,10 @@ export const AbstractRefList = (props: IAbstractRefListProps): ReactElement => {
     void router.push({ pathname: router.pathname, search: stringifySearchParams({ ...router.query, p: page }) });
   };
 
+  if (!docs) {
+    return null;
+  }
+
   return (
     <Stack direction="column" spacing={1} mt={1} w="full">
       <SearchQueryLink params={params}>

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -161,7 +161,7 @@ export const config = {
   matcher: [
     {
       source:
-        '/((?!api|_next/static|light|dark|_next/image|favicon|android|images|mockServiceWorker|site.webmanifest|error|feedback|classic-form|paper-form).*)',
+        '/((?!api|_next/static|_next/data|light|dark|_next/image|favicon|android|images|mockServiceWorker|site.webmanifest|error|feedback|classic-form|paper-form).*)',
       missing: [
         { type: 'header', key: 'next-router-prefetch' },
         { type: 'header', key: 'purpose', value: 'prefetch' },

diff --git a/src/pages/abs/[id]/citations.tsx b/src/pages/abs/[id]/citations.tsx
@@ -7,10 +7,16 @@ import { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { path } from 'ramda';
 import { APP_DEFAULTS } from '@/config';
+import { ItemsSkeleton } from '@/components';
 
 const CitationsPage: NextPage = () => {
   const router = useRouter();
-  const { data: abstractDoc, error: abstractError } = useGetAbstract({ id: router.query.id as string });
+  const {
+    data: abstractDoc,
+    error: abstractError,
+    isLoading: absLoading,
+    isFetching: absFetching,
+  } = useGetAbstract({ id: router.query.id as string });
   const doc = path<IDocsEntity>(['docs', 0], abstractDoc);
   const pageIndex = router.query.p ? parseInt(router.query.p as string) - 1 : 0;
   const { getParams, onPageChange } = useGetAbstractParams(doc?.bibcode);
@@ -20,11 +26,16 @@ const CitationsPage: NextPage = () => {
     data,
     isSuccess,
     error: citationsError,
+    isLoading: citLoading,
+    isFetching: citFetching,
   } = useGetCitations({ ...getParams(), start: pageIndex * APP_DEFAULTS.RESULT_PER_PAGE }, { keepPreviousData: true });
+
+  const isLoading = absLoading || absFetching || citLoading || citFetching;
   const citationsParams = getCitationsParams(doc?.bibcode, 0);
 
   return (
     <AbsLayout doc={doc} titleDescription="Papers that cite" label="Citations">
+      {isLoading ? <ItemsSkeleton count={10} /> : null}
       {(abstractError || citationsError) && (
         <Alert status="error">
           <AlertIcon />

diff --git a/src/pages/abs/[id]/coreads.tsx b/src/pages/abs/[id]/coreads.tsx
@@ -1,10 +1,11 @@
 import { getCoreadsParams, useGetAbstract, useGetCoreads } from '@/api';
-import { AbstractRefList } from '@/components';
+import { AbstractRefList, ItemsSkeleton, StandardAlertMessage } from '@/components';
 import { AbsLayout } from '@/components/Layout/AbsLayout';
 import { useGetAbstractParams } from '@/lib/useGetAbstractParams';
 import { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { APP_DEFAULTS } from '@/config';
+import { parseAPIError } from '@/utils';
 
 const CoreadsPage: NextPage = () => {
   const router = useRouter();
@@ -14,23 +15,25 @@ const CoreadsPage: NextPage = () => {
 
   const { getParams, onPageChange } = useGetAbstractParams(doc?.bibcode);
 
-  const { data, isSuccess } = useGetCoreads(
+  const { data, isSuccess, isLoading, isFetching, error, isError } = useGetCoreads(
     { ...getParams(), start: pageIndex * APP_DEFAULTS.RESULT_PER_PAGE },
     { keepPreviousData: true },
   );
   const coreadsParams = getCoreadsParams(doc?.bibcode, 0);
 
   return (
     <AbsLayout doc={doc} titleDescription="Papers also read by those who read" label="Coreads">
-      {isSuccess && (
+      {isLoading || isFetching ? <ItemsSkeleton count={10} /> : null}
+      {isError ? <StandardAlertMessage title={parseAPIError(error)} /> : null}
+      {isSuccess ? (
         <AbstractRefList
           doc={doc}
           docs={data.docs}
           totalResults={data.numFound}
           onPageChange={onPageChange}
           searchLinkParams={coreadsParams}
         />
-      )}
+      ) : null}
     </AbsLayout>
   );
 };

diff --git a/src/pages/abs/[id]/references.tsx b/src/pages/abs/[id]/references.tsx
@@ -7,23 +7,34 @@ import { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { path } from 'ramda';
 import { APP_DEFAULTS } from '@/config';
+import { ItemsSkeleton } from '@/components';
 
 const ReferencesPage: NextPage = () => {
   const router = useRouter();
-  const { data: abstractDoc, error: abstractError } = useGetAbstract({ id: router.query.id as string });
+  const {
+    data: abstractDoc,
+    error: abstractError,
+    isLoading: absLoading,
+    isFetching: absFetching,
+  } = useGetAbstract({ id: router.query.id as string });
   const doc = path<IDocsEntity>(['docs', 0], abstractDoc);
   const pageIndex = router.query.p ? parseInt(router.query.p as string) - 1 : 0;
 
   const { getParams, onPageChange } = useGetAbstractParams(doc?.bibcode);
   const {
     data,
     isSuccess,
+    isLoading: refLoading,
+    isFetching: refFetching,
     error: referencesError,
   } = useGetReferences({ ...getParams(), start: pageIndex * APP_DEFAULTS.RESULT_PER_PAGE }, { keepPreviousData: true });
+
+  const isLoading = refLoading || refFetching || absLoading || absFetching;
   const referencesParams = getReferencesParams(doc?.bibcode, 0);
 
   return (
     <AbsLayout doc={doc} titleDescription="Paper referenced by" label="References">
+      {isLoading ? <ItemsSkeleton count={10} /> : null}
       {(abstractError || referencesError) && (
         <Alert status="error">
           <AlertIcon />

diff --git a/src/pages/abs/[id]/similar.tsx b/src/pages/abs/[id]/similar.tsx
@@ -1,11 +1,12 @@
 import { getSimilarParams, IDocsEntity, useGetAbstract, useGetSimilar } from '@/api';
-import { AbstractRefList } from '@/components';
+import { AbstractRefList, ItemsSkeleton, StandardAlertMessage } from '@/components';
 import { AbsLayout } from '@/components/Layout/AbsLayout';
 import { useGetAbstractParams } from '@/lib/useGetAbstractParams';
 import { NextPage } from 'next';
 import { path } from 'ramda';
 import { useRouter } from 'next/router';
 import { APP_DEFAULTS } from '@/config';
+import { parseAPIError } from '@/utils';
 
 const SimilarPage: NextPage = () => {
   const router = useRouter();
@@ -14,23 +15,25 @@ const SimilarPage: NextPage = () => {
   const pageIndex = router.query.p ? parseInt(router.query.p as string) - 1 : 0;
 
   const { getParams, onPageChange } = useGetAbstractParams(doc?.bibcode);
-  const { data, isSuccess } = useGetSimilar(
+  const { data, isSuccess, isLoading, isFetching, isError, error } = useGetSimilar(
     { ...getParams(), start: pageIndex * APP_DEFAULTS.RESULT_PER_PAGE },
     { keepPreviousData: true },
   );
   const similarParams = getSimilarParams(doc?.bibcode, 0);
 
   return (
     <AbsLayout doc={doc} titleDescription="Papers similar to" label="Similar Papers">
-      {isSuccess && (
+      {isLoading || isFetching ? <ItemsSkeleton count={10} /> : null}
+      {isError ? <StandardAlertMessage title={parseAPIError(error)} /> : null}
+      {isSuccess ? (
         <AbstractRefList
           doc={doc}
           docs={data.docs}
           totalResults={data.numFound}
           onPageChange={onPageChange}
           searchLinkParams={similarParams}
         />
-      )}
+      ) : null}
     </AbsLayout>
   );
 };

diff --git a/src/pages/abs/[id]/toc.tsx b/src/pages/abs/[id]/toc.tsx
@@ -6,6 +6,8 @@ import { NextPage } from 'next';
 import { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { path } from 'ramda';
+import { ItemsSkeleton, StandardAlertMessage } from '@/components';
+import { parseAPIError } from '@/utils';
 
 const VolumePage: NextPage = () => {
   const router = useRouter();
@@ -14,7 +16,7 @@ const VolumePage: NextPage = () => {
 
   const { getParams, onPageChange } = useGetAbstractParams(doc?.bibcode);
 
-  const { data, isSuccess } = useGetToc(getParams(), {
+  const { data, isSuccess, isLoading, isFetching, isError, error } = useGetToc(getParams(), {
     enabled: !!getParams && !!doc?.bibcode,
     keepPreviousData: true,
   });
@@ -27,15 +29,17 @@ const VolumePage: NextPage = () => {
 
   return (
     <AbsLayout doc={doc} titleDescription="Papers in the same volume as" label="Volume Content">
-      {isSuccess && (
+      {isLoading || isFetching ? <ItemsSkeleton count={10} /> : null}
+      {isError ? <StandardAlertMessage title={parseAPIError(error)} /> : null}
+      {isSuccess ? (
         <AbstractRefList
           doc={doc}
           docs={data.docs}
           totalResults={data.numFound}
           onPageChange={onPageChange}
           searchLinkParams={tocParams}
         />
-      )}
+      ) : null}
     </AbsLayout>
   );
 };