From fd13b1aa4666987331ea8e09c55ea57c35427f63 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 21 Jun 2021 10:31:55 -0700
Subject: [PATCH] Keep showing page num while item search loads

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`!
---
 src/app/ItemSearchPage.js | 53 ++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js
index 47a21d9..e425888 100644
--- a/src/app/ItemSearchPage.js
+++ b/src/app/ItemSearchPage.js
@@ -132,16 +132,14 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
         $zoneIds: [ID!]!
         $offset: Int!
       ) {
-        itemSearch(
+        itemSearch: itemSearchV2(
           query: $query
           itemKind: $itemKind
           currentUserOwnsOrWants: $currentUserOwnsOrWants
           zoneIds: $zoneIds
-          offset: $offset
-          limit: 30
         ) {
           numTotalItems
-          items {
+          items(offset: $offset, limit: 30) {
             id
             name
             thumbnailUrl
@@ -163,6 +161,9 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
       },
       context: { sendAuth: true },
       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;
   }
 
-  if (loading) {
-    return (
-      <Box>
-        <PaginationToolbar isLoading marginBottom="6" />
-        <Delay>
-          <ItemSearchPageResultsLoading />
-        </Delay>
-        <PaginationToolbar isLoading marginTop="4" />
-      </Box>
-    );
-  }
-
   if (error) {
     return <MajorErrorMessage error={error} variant="network" />;
   }
 
-  if (data.itemSearch.items.length === 0) {
+  if (data?.itemSearch?.numTotalItems === 0) {
     return (
       <Box>
         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 (
     <Box>
       <PaginationToolbar
-        totalCount={data.itemSearch.numTotalItems}
+        totalCount={numTotalItems}
+        isLoading={loading}
         marginBottom="6"
       />
-      <Wrap justify="center" spacing="4">
-        {data.itemSearch.items.map((item) => (
-          <WrapItem key={item.id}>
-            <SquareItemCard item={item} />
-          </WrapItem>
-        ))}
-      </Wrap>
+      {items.length > 0 && (
+        <Wrap justify="center" spacing="4">
+          {items.map((item) => (
+            <WrapItem key={item.id}>
+              <SquareItemCard item={item} />
+            </WrapItem>
+          ))}
+        </Wrap>
+      )}
+      {loading && items.length === 0 && (
+        <Delay>
+          <ItemSearchPageResultsLoading />
+        </Delay>
+      )}
       <PaginationToolbar
-        totalCount={data.itemSearch.numTotalItems}
+        totalCount={numTotalItems}
+        isLoading={loading}
         marginTop="4"
       />
     </Box>