diff --git a/src/app/shot-on/[make]/[model]/[photoId]/layout.tsx b/src/app/shot-on/[make]/[model]/[photoId]/layout.tsx index c081a2c3..ce0cc352 100644 --- a/src/app/shot-on/[make]/[model]/[photoId]/layout.tsx +++ b/src/app/shot-on/[make]/[model]/[photoId]/layout.tsx @@ -1,4 +1,5 @@ import { + INFINITE_SCROLL_GRID_PHOTO_INITIAL, descriptionForPhoto, titleForPhoto, } from '@/photo'; @@ -59,12 +60,15 @@ export default async function PhotoCameraPage({ if (!photo) { redirect(PATH_ROOT); } - const camera = cameraFromPhoto(photo, { make, model }); - const [ photos, { count, dateRange }, - ] = await getPhotosCameraDataCached({ camera }); + camera, + ] = await getPhotosCameraDataCached( + make, + model, + INFINITE_SCROLL_GRID_PHOTO_INITIAL, + ); return <> {children} diff --git a/src/components/AnimateItems.tsx b/src/components/AnimateItems.tsx index 1a868fa2..797cf986 100644 --- a/src/components/AnimateItems.tsx +++ b/src/components/AnimateItems.tsx @@ -5,6 +5,8 @@ import { Variant, motion } from 'framer-motion'; import { useAppState } from '@/state/AppState'; import usePrefersReducedMotion from '@/utility/usePrefersReducedMotion'; +const IGNORE_CAN_START = true; + export type AnimationType = 'none' | 'scale' | 'left' | 'right' | 'bottom'; export interface AnimationConfig { @@ -20,9 +22,11 @@ interface Props extends AnimationConfig { classNameItem?: string items: ReactNode[] itemKeys?: string[] + canStart?: boolean animateFromAppState?: boolean animateOnFirstLoadOnly?: boolean staggerOnFirstLoadOnly?: boolean + onAnimationComplete?: () => void } function AnimateItems({ @@ -30,6 +34,7 @@ function AnimateItems({ classNameItem, items, itemKeys, + canStart = true, type = 'scale', duration = 0.6, staggerDelay = 0.1, @@ -38,6 +43,7 @@ function AnimateItems({ animateFromAppState, animateOnFirstLoadOnly, staggerOnFirstLoadOnly, + onAnimationComplete, }: Props) { const { hasLoaded, @@ -89,7 +95,7 @@ function AnimateItems({ {items.map((item, index) => diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx index 23785659..f6364342 100644 --- a/src/photo/PhotoDetailPage.tsx +++ b/src/photo/PhotoDetailPage.tsx @@ -100,6 +100,8 @@ export default function PhotoDetailPage({ photos={photosGrid ?? photos} selectedPhoto={photo} tag={tag} + camera={camera} + simulation={simulation} animateOnFirstLoadOnly />} contentSide={ void + onAnimationComplete?: () => void }) { return (
+ setShouldAnimateDynamicItems(true), []); + + const initialOffset = photos.length; + return ( - {count > photos.length && + {count > initialOffset &&