From 655f91b3366bbc8f08347f1832c7c3b4d7dc0d9d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 21 Oct 2023 16:27:07 -0500
Subject: [PATCH] Refactor button loader behavior

---
 src/components/IconButton.tsx     | 15 ++++++++++-----
 src/components/IconPathButton.tsx |  5 ++++-
 src/components/ShareButton.tsx    |  1 +
 src/components/Spinner.tsx        | 24 ++++++++++++++++--------
 src/photo/PhotoLarge.tsx          | 26 ++++++++++++--------------
 src/photo/SharePhotoButton.tsx    | 25 -------------------------
 6 files changed, 43 insertions(+), 53 deletions(-)
 delete mode 100644 src/photo/SharePhotoButton.tsx

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index a8076e1e..4424e751 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -21,21 +21,26 @@ export default function IconButton({
   return (
     <span className={cc(
       className,
-      'relative inline-flex items-center justify-center',
-      'min-w-[1.2rem] min-h-[1.3rem]',
+      'relative inline-flex items-center',
+      'w-[1rem] h-[1.1rem]',
     )}>
       {!isLoading
-        ? <span
+        ? <button
           onClick={onClick}
           className={cc(
+            'inline-flex items-center justify-center',
+            'p-0 border-none shadow-none',
+            'active:bg-transparent bg-transparent',
+            'translate-x-[-1px]',
             onClick !== undefined && 'cursor-pointer',
             'active:opacity-50',
           )}
         >
           {icon}
-        </span>
+        </button>
         : <span className={cc(
-          'inline-block translate-y-[1.5px]',
+          'inline-flex items-center justify-center',
+          'h-full w-full',
         )}>
           <Spinner
             color={spinnerColor}
diff --git a/src/components/IconPathButton.tsx b/src/components/IconPathButton.tsx
index 9aa43036..7c6d64f0 100644
--- a/src/components/IconPathButton.tsx
+++ b/src/components/IconPathButton.tsx
@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import IconButton from './IconButton';
 import { useEffect, useState, useTransition } from 'react';
 import { cc } from '@/utility/css';
+import { SpinnerColor } from './Spinner';
 
 export default function IconPathButton({
   icon,
@@ -12,6 +13,7 @@ export default function IconPathButton({
   loaderDelay = 250,
   shouldScroll = true,
   shouldReplace,
+  spinnerColor,
 }: {
   icon: JSX.Element
   path: string
@@ -19,6 +21,7 @@ export default function IconPathButton({
   loaderDelay?: number
   shouldScroll?: boolean
   shouldReplace?: boolean
+  spinnerColor?: SpinnerColor
 }) {
   const router = useRouter();
 
@@ -60,7 +63,7 @@ export default function IconPathButton({
         'text-gray-500 active:text-gray-600',
         'dark:text-gray-400 dark:active:text-gray-300',
       )}
-      spinnerColor="text"
+      spinnerColor={spinnerColor ?? 'text'}
     />
   );
 }
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
index a3d4388a..02057aac 100644
--- a/src/components/ShareButton.tsx
+++ b/src/components/ShareButton.tsx
@@ -21,6 +21,7 @@ export default function ShareButton({
       prefetch,
       shouldScroll,
       shouldReplace: true,
+      spinnerColor: 'dim',
     }} />
   );
 }
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 20e2ed3d..c33510e1 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,25 +1,33 @@
+import { cc } from '@/utility/css';
+
 const SIZE_DEFAULT = 12;
 
-export type SpinnerColor = 'text' | 'light-gray';
+export type SpinnerColor = 'text' | 'dim' | 'light-gray';
 
 export default function Spinner({
   size = SIZE_DEFAULT,
   color = 'light-gray',
+  className,
 }: {
   size?: number
   color?: SpinnerColor
+  className?: string
 }) {
   return (
-    <span {...{
-      ...color === 'light-gray' && {
-        className: 'text-gray-300 dark:text-gray-600',
-      },
-      style: {
+    <span
+      className={cc(
+        className,
+        color === 'light-gray' && 
+          'text-gray-300 dark:text-gray-600',
+        color === 'dim' &&
+          'text-dim',
+      )}
+      style={{
         display: 'inline-flex',
         width: size,
         height: size,
-      },
-    }}>
+      }}
+    >
       <svg
         width={size}
         height={size}
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index bb923ba5..82d54490 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -31,12 +31,12 @@ export default function PhotoLarge({
 
   const camera = cameraFromPhoto(photo);
   
-  const renderMiniGrid = (children: JSX.Element) =>
+  const renderMiniGrid = (children: JSX.Element, rightPadding = true) =>
     <div className={cc(
       'flex gap-y-4',
       'flex-col sm:flex-row md:flex-col',
       '[&>*]:sm:flex-grow',
-      'pr-2',
+      rightPadding && 'pr-2',
     )}>
       {children}
     </div>;
@@ -114,19 +114,17 @@ export default function PhotoLarge({
               )}>
                 {photo.takenAtNaiveFormatted}
               </div>
-              <div className="-translate-x-0.5">
-                <ShareButton
-                  path={pathForPhotoShare(
-                    photo,
-                    tag,
-                    shareCamera ? camera : undefined,
-                  )}
-                  prefetch={prefetchShare}
-                  shouldScroll={shouldScrollOnShare}
-                />
-              </div>
+              <ShareButton
+                path={pathForPhotoShare(
+                  photo,
+                  tag,
+                  shareCamera ? camera : undefined,
+                )}
+                prefetch={prefetchShare}
+                shouldScroll={shouldScrollOnShare}
+              />
             </div>
-          </>)}
+          </>, false)}
         </div>}
     />
   );
diff --git a/src/photo/SharePhotoButton.tsx b/src/photo/SharePhotoButton.tsx
deleted file mode 100644
index 2c02f421..00000000
--- a/src/photo/SharePhotoButton.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Photo } from '.';
-import { pathForPhotoShare } from '@/site/paths';
-import { TbPhotoShare } from 'react-icons/tb';
-import IconPathButton from '@/components/IconPathButton';
-
-export default function SharePhotoButton({
-  photo,
-  tag,
-  prefetch,
-  shouldScroll,
-}: {
-  photo: Photo
-  tag?: string
-  prefetch?: boolean
-  shouldScroll?: boolean
-}) {
-  return (
-    <IconPathButton
-      icon={<TbPhotoShare size={17} />}
-      path={pathForPhotoShare(photo, tag)}
-      prefetch={prefetch}
-      shouldScroll={shouldScroll}
-    />
-  );
-}