Prevent incorrect animation config overwrites

src/components/AnimateItems.tsx

@@ -48,9 +48,12 @@ function AnimateItems({
   const {
     hasLoaded,
     nextPhotoAnimation,
+    getNextPhotoAnimationId,
     clearNextPhotoAnimation,
   } = useAppState();
 
+  const nextPhotoAnimationId = useRef<string>(undefined);
+
   const prefersReducedMotion = usePrefersReducedMotion();
   
   const hasLoadedInitial = useRef(hasLoaded);
@@ -104,9 +107,12 @@ function AnimateItems({
             },
           },
         } : undefined}
+      onAnimationStart={() => {
+        nextPhotoAnimationId.current = getNextPhotoAnimationId?.();
+      }}
       onAnimationComplete={() => {
         if (animateFromAppState) {
-          clearNextPhotoAnimation?.();
+          clearNextPhotoAnimation?.(nextPhotoAnimationId.current);
         }
         onAnimationComplete?.();
       }}

src/photo/PhotoLink.tsx

@@ -39,6 +39,7 @@ export default function PhotoLink({
         href: pathForPhoto({ photo, ...categories }),
         onClick: () => {
           if (nextPhotoAnimation) {
+            console.log('setNextPhotoAnimation', nextPhotoAnimation);
             setNextPhotoAnimation?.(nextPhotoAnimation);
           }
         },

src/state/AppState.ts

@@ -21,8 +21,9 @@ export type AppStateContextType = {
   swrTimestamp?: number
   invalidateSwr?: () => void
   nextPhotoAnimation?: AnimationConfig
-  setNextPhotoAnimation?: Dispatch<SetStateAction<AnimationConfig | undefined>>
-  clearNextPhotoAnimation?: () => void
+  setNextPhotoAnimation?: (animationConfig?: AnimationConfig) => void
+  getNextPhotoAnimationId?: () => string
+  clearNextPhotoAnimation?: (id?: string) => void
   shouldRespondToKeyboardCommands?: boolean
   setShouldRespondToKeyboardCommands?: Dispatch<SetStateAction<boolean>>
   categoriesWithCounts?:

src/state/AppStateProvider.tsx

@@ -25,6 +25,7 @@ import { isPathAdmin, PATH_ROOT } from '@/app/paths';
 import { INITIAL_UPLOAD_STATE, UploadState } from '@/admin/upload';
 import { RecipeProps } from '@/recipe';
 import { getCountsForCategoriesCachedAction } from '@/category/actions';
+import { nanoid } from 'nanoid';
 
 export default function AppStateProvider({
   children,
@@ -42,8 +43,25 @@ export default function AppStateProvider({
     useState(false);
   const [swrTimestamp, setSwrTimestamp] =
     useState(Date.now());
-  const [nextPhotoAnimation, setNextPhotoAnimation] =
+  const [nextPhotoAnimation, _setNextPhotoAnimation] =
     useState<AnimationConfig>();
+  const setNextPhotoAnimation = useCallback((animation?: AnimationConfig) => {
+    _setNextPhotoAnimation(animation);
+    setNextPhotoAnimationId(undefined);
+  }, []);
+  const [nextPhotoAnimationId, setNextPhotoAnimationId] =
+    useState<string>();
+  const getNextPhotoAnimationId = useCallback(() => {
+    const id = nanoid();
+    setNextPhotoAnimationId(id);
+    return id;
+  }, []);
+  const clearNextPhotoAnimation = useCallback((id?: string) => {
+    if (id === nextPhotoAnimationId) {
+      setNextPhotoAnimation(undefined);
+      setNextPhotoAnimationId(undefined);
+    }
+  }, [nextPhotoAnimationId, setNextPhotoAnimation]);
   const [shouldRespondToKeyboardCommands, setShouldRespondToKeyboardCommands] =
     useState(true);
   // MODAL
@@ -172,7 +190,8 @@ export default function AppStateProvider({
         invalidateSwr,
         nextPhotoAnimation,
         setNextPhotoAnimation,
-        clearNextPhotoAnimation: () => setNextPhotoAnimation?.(undefined),
+        getNextPhotoAnimationId,
+        clearNextPhotoAnimation,
         shouldRespondToKeyboardCommands,
         setShouldRespondToKeyboardCommands,
         categoriesWithCounts,