Warm functions instead of calling db on first page load

src/photo/InfinitePhotoScroll.tsx

@@ -4,6 +4,7 @@ import useSwrInfinite from 'swr/infinite';
 import {
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
 } from 'react';
@@ -14,6 +15,7 @@ import { Photo, PhotoSetCategory } from '.';
 import { clsx } from 'clsx/lite';
 import { useAppState } from '@/state/AppState';
 import { GetPhotosOptions } from './db';
+import useVisible from '@/utility/useVisible';
 
 export type RevalidatePhoto = (
   photoId: string,
@@ -56,7 +58,10 @@ export default function InfinitePhotoScroll({
       : [key, size]
     , [key]);
 
-  const fetcher = useCallback(([_key, size]: [string, number]) =>
+  const fetcher = useCallback((
+    [_key, size]: [string, number],
+    warmOnly?: boolean,
+  ) =>
     (useCachedPhotos ? getPhotosCachedAction : getPhotosAction)({
       offset: initialOffset + size * itemsPerPage,
       sortBy,
@@ -65,7 +70,7 @@ export default function InfinitePhotoScroll({
       tag,
       camera,
       simulation,
-    })
+    }, warmOnly)
   , [
     useCachedPhotos,
     sortBy,
@@ -77,18 +82,22 @@ export default function InfinitePhotoScroll({
     simulation,
   ]);
 
-  const { data, isLoading, isValidating, error, mutate, setSize } =
+  const { data, isLoading, isValidating, error, mutate, size, setSize } =
     useSwrInfinite<Photo[]>(
       keyGenerator,
       fetcher,
       {
-        initialSize: 2,
+        initialSize: 0,
         revalidateFirstPage: false,
         revalidateOnFocus: Boolean(isUserSignedIn),
         revalidateOnReconnect: Boolean(isUserSignedIn),
       },
     );
 
+  useEffect(() => {
+    fetcher(['', 0], true);
+  }, [fetcher]);
+
   const buttonContainerRef = useRef<HTMLDivElement>(null);
   
   const isLoadingOrValidating = isLoading || isValidating;
@@ -116,6 +125,10 @@ export default function InfinitePhotoScroll({
     },
   } as any), [data, mutate]);
 
+  useVisible({ ref: buttonContainerRef, onVisible: () => {
+    if (size === 0) { advance(); }
+  }});
+
   const renderMoreButton = () =>
     <div ref={buttonContainerRef}>
       <button

src/photo/PhotoGridPage.tsx

@@ -4,7 +4,7 @@ import { Tags } from '@/tag';
 import { Photo } from '.';
 import { Cameras } from '@/camera';
 import { FilmSimulations } from '@/simulation';
-import { PATH_GRID } from '@/site/paths';
+import { PATH_GRID_INFERRED } from '@/site/paths';
 import PhotoGridSidebar from './PhotoGridSidebar';
 import PhotoGridContainer from './PhotoGridContainer';
 import { useEffect } from 'react';
@@ -33,7 +33,7 @@ export default function PhotoGridPage({
 
   return (
     <PhotoGridContainer
-      cacheKey={`page-${PATH_GRID}`}
+      cacheKey={`page-${PATH_GRID_INFERRED}`}
       photos={photos}
       count={photosCount}
       sidebar={

src/photo/PhotosLargeInfinite.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { PATH_ROOT } from '@/site/paths';
+import { PATH_FEED_INFERRED } from '@/site/paths';
 import InfinitePhotoScroll from './InfinitePhotoScroll';
 import PhotosLarge from './PhotosLarge';
 
@@ -13,7 +13,7 @@ export default function PhotosLargeInfinite({
 }) {
   return (
     <InfinitePhotoScroll
-      cacheKey={`page-${PATH_ROOT}`}
+      cacheKey={`page-${PATH_FEED_INFERRED}`}
       initialOffset={initialOffset}
       itemsPerPage={itemsPerPage}
       wrapMoreButtonInGrid

src/photo/actions.ts

@@ -406,15 +406,31 @@ export const getPhotosHiddenMetaCachedAction = async () =>
 
 // Public/Private actions
 
-export const getPhotosAction = async (options: GetPhotosOptions) =>
-  areOptionsSensitive(options)
-    ? runAuthenticatedAdminServerAction(() => getPhotos(options))
-    : getPhotos(options);
+export const getPhotosAction = async (
+  options: GetPhotosOptions,
+  warmOnly?: boolean,
+) => {
+  if (warmOnly) {
+    return [];
+  } else {
+    return areOptionsSensitive(options)
+      ? runAuthenticatedAdminServerAction(() => getPhotos(options))
+      : getPhotos(options);
+  }
+};
 
-export const getPhotosCachedAction = async (options: GetPhotosOptions) =>
-  areOptionsSensitive(options)
-    ? runAuthenticatedAdminServerAction(() => getPhotosCached(options))
-    : getPhotosCached(options);
+export const getPhotosCachedAction = async (
+  options: GetPhotosOptions,
+  warmOnly?: boolean,
+) => {
+  if (warmOnly) {
+    return [];
+  } else {
+    return areOptionsSensitive(options)
+      ? runAuthenticatedAdminServerAction(() => getPhotosCached(options))
+      : getPhotosCached(options);
+  }
+};
 
 // Public actions