Preload next/prev user outfits page

Even in production, scrolling is a bit slow! This will preload the pagination one click ahead.

There is a bit of a perf downside, in that if you click through the pages too fast, you'll trigger _extra_ requests. I think that's a net win though, and I'm not gonna try to get cleverer than this right now.

src/app/UserOutfitsPage.js

@@ -20,14 +20,7 @@ function UserOutfitsPage() {
   );
 }
 
-function UserOutfitsPageContent() {
+const USER_OUTFITS_PAGE_QUERY = gql`
-  const { isLoading: userLoading } = useRequireLogin();
-
-  const { search } = useLocation();
-  const offset = parseInt(new URLSearchParams(search).get("offset")) || 0;
-
-  const { loading: queryLoading, error, data } = useQuery(
-    gql`
   query UserOutfitsPageContent($offset: Int!) {
     currentUser {
       id
@@ -55,7 +48,18 @@ function UserOutfitsPageContent() {
       }
     }
   }
-    `,
+`;
+
+const PER_PAGE = 20;
+
+function UserOutfitsPageContent() {
+  const { isLoading: userLoading } = useRequireLogin();
+
+  const { search } = useLocation();
+  const offset = parseInt(new URLSearchParams(search).get("offset")) || 0;
+
+  const { loading: queryLoading, error, data } = useQuery(
+    USER_OUTFITS_PAGE_QUERY,
     {
       variables: { offset },
       context: { sendAuth: true },
@@ -66,6 +70,26 @@ function UserOutfitsPageContent() {
     }
   );
 
+  const numTotalOutfits = data?.currentUser?.numTotalOutfits || null;
+
+  // Preload the previous and next pages. (Sigh, if we were doing cool Next.js
+  // stuff, this would already be happening by next/link magic I think!)
+  const prevPageOffset = offset - PER_PAGE;
+  const nextPageOffset = offset + PER_PAGE;
+  useQuery(USER_OUTFITS_PAGE_QUERY, {
+    variables: { offset: prevPageOffset },
+    context: { sendAuth: true },
+    skip: userLoading || offset === 0 || prevPageOffset < 0,
+  });
+  useQuery(USER_OUTFITS_PAGE_QUERY, {
+    variables: { offset: nextPageOffset },
+    context: { sendAuth: true },
+    skip:
+      userLoading ||
+      numTotalOutfits == null ||
+      nextPageOffset >= numTotalOutfits,
+  });
+
   const isLoading = userLoading || queryLoading;
 
   if (error) {
@@ -78,8 +102,8 @@ function UserOutfitsPageContent() {
     <Box>
       <PaginationToolbar
         isLoading={isLoading}
-        totalCount={data?.currentUser?.numTotalOutfits}
+        totalCount={numTotalOutfits}
-        numPerPage={20}
+        numPerPage={PER_PAGE}
       />
       <Box height="6" />
       {isLoading ? (
@@ -100,8 +124,8 @@ function UserOutfitsPageContent() {
       <Box height="6" />
       <PaginationToolbar
         isLoading={isLoading}
-        totalCount={data?.currentUser?.numTotalOutfits}
+        totalCount={numTotalOutfits}
-        numPerPage={20}
+        numPerPage={PER_PAGE}
       />
     </Box>
   );