Fix admin photo menu glitches

src/components/more/MoreMenu.tsx

@@ -15,10 +15,12 @@ export default function MoreMenu({
   items,
   className,
   buttonClassName,
+  ariaLabel,
 }: {
   items: MoreMenuItem[]
   className?: string
   buttonClassName?: string
+  ariaLabel: string
 }){
   return (
     <DropdownMenu.Root>
@@ -31,7 +33,7 @@ export default function MoreMenu({
             'hover:dark:bg-gray-800/75 active:dark:bg-gray-900',
             'text-dim',
           )}
-          aria-label={`Choose an action for photo: ${'photo'}`}
+          aria-label={ariaLabel}
         >
           <FiMoreHorizontal size={18} />
         </button>

src/components/more/MoreMenuItem.tsx

@@ -2,9 +2,9 @@
 
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { clsx } from 'clsx/lite';
-import { ReactNode, useState } from 'react';
+import { ReactNode, useState, useTransition } from 'react';
 import LoaderButton from '../primitives/LoaderButton';
-import PathLoaderButton from '../primitives/PathLoaderButton';
+import { useRouter } from 'next/navigation';
 
 export default function MoreMenuItem({
   label,
@@ -17,6 +17,10 @@ export default function MoreMenuItem({
   href?: string
   action?: () => Promise<void> | void
 }) {
+  const router = useRouter();
+
+  const [isPending, startTransition] = useTransition();
+
   const [isLoading, setIsLoading] = useState(false);
 
   return (
@@ -32,36 +36,28 @@ export default function MoreMenuItem({
           ? 'cursor-not-allowed opacity-50'
           : 'cursor-pointer',
       )}
+      onClick={e => {
+        e.preventDefault();
+        if (href) {
+          startTransition(() => router.push(href));
+        } else {
+          const result = action?.();
+          if (result instanceof Promise) {
+            setIsLoading(true);
+            result.finally(() => setIsLoading(false));
+          }
+        }
+      }}
     >
-      {href &&
+      <LoaderButton
-        <PathLoaderButton
+        icon={icon}
-          path={href}
+        isLoading={isLoading || isPending}
-          icon={icon}
+        hideTextOnMobile={false}
-          hideTextOnMobile={false}
+        styleAs="link-without-hover"
-          shouldPreventDefault
+        className="translate-y-[1px]"
-          styleAs="link-without-hover"
+      >
-        >
+        {label}
-          {label}
+      </LoaderButton>
-        </PathLoaderButton>}
-      {action &&
-        <LoaderButton
-          icon={icon}
-          isLoading={isLoading}
-          hideTextOnMobile={false}
-          styleAs="link-without-hover"
-          onClick={e => {
-            if (!href) {
-              const result = action?.();
-              if (result instanceof Promise) {
-                e.preventDefault();
-                setIsLoading(true);
-                result.finally(() => setIsLoading(false));
-              }
-            }
-          }}
-        >
-          {label}
-        </LoaderButton>}
     </DropdownMenu.Item>
   );
 }

src/photo/PhotoLarge.tsx

@@ -6,6 +6,7 @@ import {
   doesPhotoNeedBlurCompatibility,
   shouldShowCameraDataForPhoto,
   shouldShowExifDataForPhoto,
+  titleForPhoto,
 } from '.';
 import SiteGrid from '@/components/SiteGrid';
 import ImageLarge from '@/components/image/ImageLarge';
@@ -133,6 +134,7 @@ export default function PhotoLarge({
                   photo,
                   revalidatePhoto,
                   includeFavorite: includeFavoriteInAdminMenu,
+                  ariaLabel: `Admin menu for '${titleForPhoto(photo)}' photo`,
                 }} />
               </div>
             </div>