OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Keep showing page num while item search loads

Browse source 
Now, when you click Prev/Next, we show the page number while the items load, rather than blink it in and out!

This is because we're using itemSearchV2, which makes `numTotalItems` cacheable separately from the paginated `items`. Apollo Cache pretty much does this with zero config, we just have to ask for `returnPartialData`!
This commit is contained in:
Emi Matchu 2021-06-21 10:31:55 -07:00
parent c38678cf1a
commit fd13b1aa46
1 changed files with 27 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/app/ItemSearchPage.js
View file

@ -132,16 +132,14 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
$zoneIds: [ID!]! $zoneIds: [ID!]!
$offset: Int! $offset: Int!
) { ) {
itemSearch( itemSearch: itemSearchV2(
query: $query query: $query
itemKind: $itemKind itemKind: $itemKind
currentUserOwnsOrWants: $currentUserOwnsOrWants currentUserOwnsOrWants: $currentUserOwnsOrWants
zoneIds: $zoneIds zoneIds: $zoneIds
offset: $offset
limit: 30
) { ) {
numTotalItems numTotalItems
items { items(offset: $offset, limit: 30) {
id id
name name
thumbnailUrl thumbnailUrl
@ -163,6 +161,9 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
}, },
context: { sendAuth: true }, context: { sendAuth: true },
skip: searchQueryIsEmpty(query), skip: searchQueryIsEmpty(query),
// This will give us the cached numTotalItems while we wait for the
// next item page!
returnPartialData: true,
} }
); );
@ -170,23 +171,11 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
return null; return null;
} }
if (loading) {
return (
<Box>
<PaginationToolbar isLoading marginBottom="6" />
<Delay>
<ItemSearchPageResultsLoading />
</Delay>
<PaginationToolbar isLoading marginTop="4" />
</Box>
);
}
if (error) { if (error) {
return <MajorErrorMessage error={error} variant="network" />; return <MajorErrorMessage error={error} variant="network" />;
} }
if (data.itemSearch.items.length === 0) { if (data?.itemSearch?.numTotalItems === 0) {
return ( return (
<Box> <Box>
We couldn't find any matching items{" "} We couldn't find any matching items{" "}
@ -198,21 +187,33 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
); );
} }
const items = data?.itemSearch?.items || [];
const numTotalItems = data?.itemSearch?.numTotalItems || null;
return ( return (
<Box> <Box>
<PaginationToolbar <PaginationToolbar
totalCount={data.itemSearch.numTotalItems} totalCount={numTotalItems}
isLoading={loading}
marginBottom="6" marginBottom="6"
/> />
<Wrap justify="center" spacing="4"> {items.length > 0 && (
{data.itemSearch.items.map((item) => ( <Wrap justify="center" spacing="4">
<WrapItem key={item.id}> {items.map((item) => (
<SquareItemCard item={item} /> <WrapItem key={item.id}>
</WrapItem> <SquareItemCard item={item} />
))} </WrapItem>
</Wrap> ))}
</Wrap>
)}
{loading && items.length === 0 && (
<Delay>
<ItemSearchPageResultsLoading />
</Delay>
)}
<PaginationToolbar <PaginationToolbar
totalCount={data.itemSearch.numTotalItems} totalCount={numTotalItems}
isLoading={loading}
marginTop="4" marginTop="4"
/> />
</Box> </Box>