Fine tune infinite scroll values

src/app/grid/page.tsx

@@ -1,6 +1,7 @@
 import { getPhotosCached } from '@/photo/cache';
 import SiteGrid from '@/components/SiteGrid';
 import {
+  INFINITE_SCROLL_INITIAL_GRID,
   INFINITE_SCROLL_MULTIPLE_GRID,
   generateOgImageMetaForPhotos,
 } from '@/photo';
@@ -27,7 +28,7 @@ export default async function GridPage() {
     cameras,
     simulations,
   ] = await Promise.all([
-    getPhotosCached({ limit: INFINITE_SCROLL_MULTIPLE_GRID }),
+    getPhotosCached({ limit: INFINITE_SCROLL_INITIAL_GRID }),
     ...getPhotoSidebarDataCached(),
   ]);
 
@@ -36,10 +37,10 @@ export default async function GridPage() {
       ? <SiteGrid
         contentMain={<div className="space-y-0.5 sm:space-y-1">
           <PhotoGrid {...{ photos }} />
-          {photos.length >= INFINITE_SCROLL_MULTIPLE_GRID &&
+          {photosCount >= photos.length &&
             <InfinitePhotoScroll
               type='grid'
-              initialOffset={INFINITE_SCROLL_MULTIPLE_GRID}
+              initialOffset={INFINITE_SCROLL_INITIAL_GRID}
               itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}
             />}
         </div>}

src/app/page.tsx

@@ -1,5 +1,6 @@
-import { getPhotosCachedCached } from '@/photo/cache';
+import { getPhotosCachedCached, getPhotosCountCached } from '@/photo/cache';
 import {
+  INFINITE_SCROLL_INITIAL_HOME,
   INFINITE_SCROLL_MULTIPLE_HOME,
   generateOgImageMetaForPhotos,
 } from '@/photo';
@@ -12,29 +13,36 @@ import PhotosLarge from '@/photo/PhotosLarge';
 export const dynamic = 'force-static';
 
 export async function generateMetadata(): Promise<Metadata> {
+  // Make homepage queries resilient to error on first time setup
   const photos = await getPhotosCachedCached({
     limit: MAX_PHOTOS_TO_SHOW_OG,
   })
-    // Make homepage queries resilient to error on first time setup
     .catch(() => []);
   return generateOgImageMetaForPhotos(photos);
 }
 
 export default async function HomePage() {
-  const photos = await getPhotosCachedCached({ 
-    limit: INFINITE_SCROLL_MULTIPLE_HOME,
-  })
-    // Make homepage queries resilient to error on first time setup
-    .catch(() => []);
+  // Make homepage queries resilient to error on first time setup
+  const [
+    photos,
+    photosCount,
+  ] = await Promise.all([
+    getPhotosCachedCached({ 
+      limit: INFINITE_SCROLL_INITIAL_HOME,
+    })
+      .catch(() => []),
+    getPhotosCountCached()
+      .catch(() => 0),
+  ]);
 
   return (
     photos.length > 0
       ? <div className="space-y-1">
         <PhotosLarge {...{ photos }} />
-        {photos.length >= INFINITE_SCROLL_MULTIPLE_HOME &&
+        {photosCount >= photos.length &&
           <InfinitePhotoScroll
             type="full-frame"
-            initialOffset={INFINITE_SCROLL_MULTIPLE_HOME}
+            initialOffset={INFINITE_SCROLL_INITIAL_HOME}
             itemsPerPage={INFINITE_SCROLL_MULTIPLE_HOME}
           />}
       </div>

src/photo/InfinitePhotoScroll.tsx

@@ -22,12 +22,12 @@ export type RevalidatePhoto = (
 
 export default function InfinitePhotoScroll({
   type = 'full-frame',
-  initialOffset = 0,
-  itemsPerPage = 12,
+  initialOffset,
+  itemsPerPage,
 }: {
-  type?: 'full-frame' | 'grid'
-  initialOffset?: number
-  itemsPerPage?: number
+  type: 'full-frame' | 'grid'
+  initialOffset: number
+  itemsPerPage: number
   debug?: boolean
 }) {
   const { swrTimestamp, isUserSignedIn } = useAppState();

src/photo/index.ts

@@ -15,11 +15,19 @@ import type { Metadata } from 'next';
 
 export const GENERATE_STATIC_PARAMS_LIMIT = 1000;
 
-export const INFINITE_SCROLL_MULTIPLE_HOME =
+// ROOT PAGE
+export const INFINITE_SCROLL_INITIAL_HOME =
   process.env.NODE_ENV === 'development' ? 2 : 12;
-export const INFINITE_SCROLL_MULTIPLE_GRID = HIGH_DENSITY_GRID
+export const INFINITE_SCROLL_MULTIPLE_HOME =
+  process.env.NODE_ENV === 'development' ? 2 : 24;
+
+// GRID PAGE
+export const INFINITE_SCROLL_INITIAL_GRID = HIGH_DENSITY_GRID
   ? process.env.NODE_ENV === 'development' ? 4 : 20
   : process.env.NODE_ENV === 'development' ? 4 : 24;
+export const INFINITE_SCROLL_MULTIPLE_GRID = HIGH_DENSITY_GRID
+  ? process.env.NODE_ENV === 'development' ? 4 : 40
+  : process.env.NODE_ENV === 'development' ? 4 : 48;
 
 export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;