diff --git a/src/app/grid/page.tsx b/src/app/grid/page.tsx index 22b638ed..f5032a87 100644 --- a/src/app/grid/page.tsx +++ b/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() { ? - {photos.length >= INFINITE_SCROLL_MULTIPLE_GRID && + {photosCount >= photos.length && } } diff --git a/src/app/page.tsx b/src/app/page.tsx index 534885d9..dbd3e611 100644 --- a/src/app/page.tsx +++ b/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 { + // 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 ?
- {photos.length >= INFINITE_SCROLL_MULTIPLE_HOME && + {photosCount >= photos.length && }
diff --git a/src/photo/InfinitePhotoScroll.tsx b/src/photo/InfinitePhotoScroll.tsx index 61dbd5cc..0206c964 100644 --- a/src/photo/InfinitePhotoScroll.tsx +++ b/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(); diff --git a/src/photo/index.ts b/src/photo/index.ts index a742c079..0c94abd5 100644 --- a/src/photo/index.ts +++ b/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;