Disable home page animation

src/app/page.tsx

@@ -32,7 +32,11 @@ export default async function HomePage() {
   return (
     photos.length > 0
       ? <div className="space-y-1">
-        <PhotosLarge photos={photos} prefetchFirstPhotoLinks={true} />
+        <PhotosLarge
+          photos={photos}
+          animate={false}
+          prefetchFirstPhotoLinks={true}
+        />
         <Suspense>
           <MorePhotosRoot
             initialOffset={INFINITE_SCROLL_MULTIPLE_HOME}

src/components/AnimateItems.tsx

@@ -19,6 +19,7 @@ interface Props extends AnimationConfig {
   className?: string
   classNameItem?: string
   items: ReactNode[]
+  itemKeys?: string[]
   animateFromAppState?: boolean
   animateOnFirstLoadOnly?: boolean
   staggerOnFirstLoadOnly?: boolean
@@ -28,6 +29,7 @@ function AnimateItems({
   className,
   classNameItem,
   items,
+  itemKeys,
   type = 'scale',
   duration = 0.6,
   staggerDelay = 0.1,
@@ -104,7 +106,7 @@ function AnimateItems({
     >
       {items.map((item, index) =>
         <motion.div
-          key={index}
+          key={itemKeys ? itemKeys[index] : index}
           className={classNameItem}
           variants={{
             hidden: getInitialVariant(),

src/photo/MorePhotosRoot.tsx

@@ -19,7 +19,7 @@ export function MorePhotosRoot({
     'use server';
     if (
       process.env.NODE_ENV === 'development' &&
-      Math.random() < 0.5
+      Math.random() < 0.1
     ) {
       return { didFail: true };
     }

src/photo/PhotoGrid.tsx

@@ -72,6 +72,7 @@ export default function PhotoGrid({
             priority: photoPriority,
           }} />
         </div>).concat(additionalTile ?? [])}
+      itemKeys={photos.map(photo => photo.id)}
     />
   );
 };

src/photo/PhotosLarge.tsx

@@ -4,14 +4,17 @@ import PhotoLarge from './PhotoLarge';
 
 export default function PhotosLarge({
   photos,
+  animate = true,
   prefetchFirstPhotoLinks,
 }: {
   photos: Photo[]
+  animate?: boolean
   prefetchFirstPhotoLinks?: boolean
 }) {
   return (
     <AnimateItems
       className="space-y-1"
+      type={animate ? 'scale' : 'none'}
       duration={0.7}
       staggerDelay={0.15}
       distanceOffset={0}
@@ -23,6 +26,7 @@ export default function PhotosLarge({
           priority={index <= 1}
           prefetchRelatedLinks={prefetchFirstPhotoLinks && index === 0}
         />)}
+      itemKeys={photos.map(photo => photo.id)}
     />
   );
 }

src/site/Nav.tsx

@@ -1,9 +1,16 @@
 import { authCachedSafe } from '@/auth/cache';
 import NavClient from './NavClient';
 
-export default async function Nav() {
+export default async function Nav({
+  animate,
+}: {
+  animate?: boolean
+}) {
   const session = await authCachedSafe();
   return (
-    <NavClient showAdmin={Boolean(session?.user?.email)} />
+    <NavClient
+      showAdmin={Boolean(session?.user?.email)}
+      animate={animate}
+    />
   );
 }

src/site/NavClient.tsx

@@ -8,7 +8,6 @@ import { SITE_DOMAIN_OR_TITLE } from '@/site/config';
 import ViewSwitcher, { SwitcherSelection } from '@/site/ViewSwitcher';
 import {
   PATH_ROOT,
-  isPathAdmin,
   isPathGrid,
   isPathProtected,
   isPathSignIn,
@@ -17,15 +16,15 @@ import AnimateItems from '../components/AnimateItems';
 
 export default function NavClient({
   showAdmin,
+  animate,
 }: {
   showAdmin?: boolean,
+  animate?: boolean,
 }) {
   const pathname = usePathname();
 
   const showNav = !isPathSignIn(pathname);
 
-  const shouldAnimate = !isPathAdmin(pathname);
-
   const renderLink = (
     text: string,
     linkOrAction: string | (() => void),
@@ -49,7 +48,7 @@ export default function NavClient({
       contentMain={
         <AnimateItems
           animateOnFirstLoadOnly
-          type={!shouldAnimate ? 'none' : 'bottom'}
+          type={animate ? 'bottom' : 'none'}
           distanceOffset={10}
           items={showNav
             ? [<div