Choreograph batch edit navigation/action

src/admin/AdminAppMenu.tsx

@@ -31,6 +31,7 @@ import Spinner from '@/components/Spinner';
 import { useAppText } from '@/i18n/state/client';
 import SwitcherItemMenu from '@/components/switcher/SwitcherItemMenu';
 import { MoreMenuSection } from '@/components/more/MoreMenu';
+import { usePathname } from 'next/navigation';
 
 export default function AdminAppMenu({
   isOpen,
@@ -39,6 +40,8 @@ export default function AdminAppMenu({
   isOpen?: boolean
   setIsOpen?: (isOpen: boolean) => void
 }) {
+  const pathname = usePathname();
+
   const {
     photosCountTotal = 0,
     photosCountNeedSync = 0,
@@ -155,15 +158,19 @@ export default function AdminAppMenu({
             size={16}
             className="translate-x-[-0.5px]"
           />,
-        href: PATH_GRID_INFERRED,
-        action: () => {
-          if (isSelecting) {
-            setSelectedPhotoIds?.(undefined);
-          } else {
-            setSelectedPhotoIds?.([]);
-          }
+        ...pathname !== PATH_GRID_INFERRED && {
+          href: PATH_GRID_INFERRED,
+        },
+        action: () => {
+          setTimeout(() => {
+            if (isSelecting) {
+              setSelectedPhotoIds?.(undefined);
+            } else {
+              setSelectedPhotoIds?.([]);
+            }
+            // Only add timeout when navigating
+          }, pathname !== PATH_GRID_INFERRED ? 200 : 0);
         },
-        shouldPreventDefault: false,
       });
     }
     items.push({
@@ -181,6 +188,7 @@ export default function AdminAppMenu({
 
     return { items };
   }, [
+    pathname,
     appText,
     isSelecting,
     photosCountNeedSync,

src/components/LinkWithStatus.tsx

@@ -29,13 +29,17 @@ export default function LinkWithStatus({
 
   const isControlled = typeof children === 'function';
 
-  const hasStartedRef = useRef(false);
+  const didStartLoading = useRef(false);
   useEffect(() => {
     if (isLoading) {
-      hasStartedRef.current = true;
-    } else if (hasStartedRef.current) {
+      didStartLoading.current = true;
+      return () => {
+        // Call onload when component unmounts while loading
+        if (isLoading) { onLoad?.(); }
+      };
+    } else if (didStartLoading.current) {
       onLoad?.();
-      hasStartedRef.current = false;
+      didStartLoading.current = false;
     }
   }, [isLoading, onLoad]);
 

src/components/more/MoreMenuItem.tsx

@@ -82,7 +82,7 @@ export default function MoreMenuItem({
       )}
       onSelect={async e => {
         if (shouldPreventDefault) { e.preventDefault(); }
-        if (action) {
+        if (action && !href) {
           const result = action();
           if (result instanceof Promise) {
             setIsLoading(true);
@@ -120,7 +120,10 @@ export default function MoreMenuItem({
             'inline-flex items-center grow',
             'text-sm text-main hover:text-main',
           )}
-          onLoad={dismissMenu}
+          onLoad={() => {
+            action?.();
+            dismissMenu?.();
+          }}
           flickerThreshold={0}
         >
           {buttonContent}