From 4267eafd5a565b77c4fe5342b8563c4642c319b4 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 18 Apr 2024 22:29:31 -0500
Subject: [PATCH] Disable home page animation

---
 src/app/page.tsx                |  6 +++++-
 src/components/AnimateItems.tsx |  4 +++-
 src/photo/MorePhotosRoot.tsx    |  2 +-
 src/photo/PhotoGrid.tsx         |  1 +
 src/photo/PhotosLarge.tsx       |  4 ++++
 src/site/Nav.tsx                | 11 +++++++++--
 src/site/NavClient.tsx          |  7 +++----
 7 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 84999b4f..caa48fd5 100644
--- a/src/app/page.tsx
+++ b/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}
diff --git a/src/components/AnimateItems.tsx b/src/components/AnimateItems.tsx
index c4ddb2ad..1a868fa2 100644
--- a/src/components/AnimateItems.tsx
+++ b/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(),
diff --git a/src/photo/MorePhotosRoot.tsx b/src/photo/MorePhotosRoot.tsx
index 91b7eef5..a3e98af8 100644
--- a/src/photo/MorePhotosRoot.tsx
+++ b/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 };
     }
diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index 64ed24ec..c4015796 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -72,6 +72,7 @@ export default function PhotoGrid({
             priority: photoPriority,
           }} />
         </div>).concat(additionalTile ?? [])}
+      itemKeys={photos.map(photo => photo.id)}
     />
   );
 };
diff --git a/src/photo/PhotosLarge.tsx b/src/photo/PhotosLarge.tsx
index 89550851..1c0f570d 100644
--- a/src/photo/PhotosLarge.tsx
+++ b/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)}
     />
   );
 }
diff --git a/src/site/Nav.tsx b/src/site/Nav.tsx
index 0526b141..f20874cc 100644
--- a/src/site/Nav.tsx
+++ b/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}
+    />
   );
 }
diff --git a/src/site/NavClient.tsx b/src/site/NavClient.tsx
index a34d4350..d323511c 100644
--- a/src/site/NavClient.tsx
+++ b/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