Skip to content

Commit

Permalink
add some loading indicators to detail pages
Browse files Browse the repository at this point in the history
  • Loading branch information
thostetler committed Oct 3, 2024
1 parent ad9cfcd commit 6b8ad81
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 14 deletions.
4 changes: 4 additions & 0 deletions src/components/AbstractRefList/AbstractRefList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion src/middleware.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand Down
13 changes: 12 additions & 1 deletion src/pages/abs/[id]/citations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 />
Expand Down
11 changes: 7 additions & 4 deletions src/pages/abs/[id]/coreads.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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>
);
};
Expand Down
13 changes: 12 additions & 1 deletion src/pages/abs/[id]/references.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
11 changes: 7 additions & 4 deletions src/pages/abs/[id]/similar.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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>
);
};
Expand Down
10 changes: 7 additions & 3 deletions src/pages/abs/[id]/toc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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,
});
Expand All @@ -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>
);
};
Expand Down

0 comments on commit 6b8ad81

Please sign in to comment.