Switch to custom spinner with color tweaks

package.json

@@ -30,7 +30,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
-    "react-spinners": "^0.13.8",
     "short-uuid": "^4.2.2",
     "sonner": "^0.7.1",
     "tailwindcss": "3.3.3",

pnpm-lock.yaml

@@ -24,7 +24,6 @@ specifiers:
   react: 18.2.0
   react-dom: 18.2.0
   react-icons: ^4.11.0
-  react-spinners: ^0.13.8
   short-uuid: ^4.2.2
   sonner: ^0.7.1
   tailwindcss: 3.3.3
@@ -55,7 +54,6 @@ dependencies:
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-icons: 4.11.0_react@18.2.0
-  react-spinners: 0.13.8_biqbaboplfbrettd7655fr4n2y
   short-uuid: 4.2.2
   sonner: 0.7.1_biqbaboplfbrettd7655fr4n2y
   tailwindcss: 3.3.3
@@ -2983,16 +2981,6 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
-  /react-spinners/0.13.8_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==}
-    peerDependencies:
-      react: ^16.0.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}

src/components/IconButton.tsx

@@ -1,18 +1,22 @@
 'use client';
 
 import { cc } from '@/utility/css';
-import Spinner from './Spinner';
+import Spinner, { SpinnerColor } from './Spinner';
 
 export default function IconButton({
   children,
   onClick,
   isLoading,
   className,
+  spinnerColor,
+  spinnerSize,
 }: {
   children: React.ReactNode
   onClick?: () => void
   isLoading?: boolean
   className?: string
+  spinnerColor?: SpinnerColor
+  spinnerSize?: number
 }) {
   return (
     <span className={cc(
@@ -33,7 +37,10 @@ export default function IconButton({
         : <span className={cc(
           'inline-block translate-y-[1.5px]',
         )}>
-          <Spinner size={12} />
+          <Spinner
+            color={spinnerColor}
+            size={spinnerSize}
+          />
         </span>}
     </span>
   );

src/components/Spinner.tsx

@@ -1,21 +1,40 @@
-import { ClipLoader } from 'react-spinners';
-import resolveConfig from 'tailwindcss/resolveConfig';
-import myConfig from '../../tailwind.config.js';
+const SIZE_DEFAULT = 12;
 
-const TAILWIND_COLORS = resolveConfig(myConfig).theme?.colors as any;
+export type SpinnerColor = 'text' | 'light-gray';
 
 export default function Spinner({
-  size = 35,
-  className,
+  size = SIZE_DEFAULT,
+  color = 'light-gray',
 }: {
   size?: number
-  className?: string
+  color?: SpinnerColor
 }) {
   return (
-    <ClipLoader {...{
-      size,
-      className,
-      color: TAILWIND_COLORS.gray[300],
-    }} />
+    <span {...{
+      ...color === 'light-gray' && {
+        className: 'text-gray-300 dark:text-gray-600',
+      },
+      style: {
+        display: 'inline-flex',
+        width: size,
+        height: size,
+      },
+    }}>
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 12 12"
+        fill="none"
+        stroke="currentColor"
+        stroke-width={SIZE_DEFAULT / size * 2}
+        xmlns="http://www.w3.org/2000/svg"
+        className="animate-rotate-pulse"
+      >
+        <path
+          // eslint-disable-next-line max-len
+          d="M11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11"
+        />
+      </svg>
+    </span>
   );
-};
+}

src/components/SubmitButtonWithStatus.tsx

@@ -24,7 +24,7 @@ export default function SubmitButtonWithStatus(props: Props) {
   return (
     <button
       type="submit"
-      disabled={disabled || pending}
+      disabled={disabled}
       className={cc(
         className,
         'inline-flex items-center gap-2',

src/photo/PhotoOGTile.tsx

@@ -9,9 +9,9 @@ import {
 import { cc } from '@/utility/css';
 import Link from 'next/link';
 import { BiError } from 'react-icons/bi';
-import Spinner from '@/components/Spinner';
 import { IMAGE_OG_HEIGHT, IMAGE_OG_RATIO, IMAGE_OG_WIDTH } from '@/site';
 import { absoluteRouteForPhotoImage, routeForPhoto } from '@/site/routes';
+import Spinner from '@/components/Spinner';
 
 export type OGLoadingState = 'unloaded' | 'loading' | 'loaded' | 'failed';
 
@@ -64,7 +64,7 @@ export default function PhotoOGTile({
             'absolute top-0 left-0 right-0 bottom-0 z-10',
             'flex items-center justify-center',
           )}>
-            <Spinner />
+            <Spinner size={40} />
           </div>}
         {loadingState === 'failed' &&
           <div className={cc(

src/photo/SharePhotoButton.tsx

@@ -38,6 +38,7 @@ export default function SharePhotoButton({
         'text-gray-500 active:text-gray-600',
         'dark:text-gray-400 dark:active:text-gray-300',
       )}
+      spinnerColor="text"
     >
       <TbPhotoShare size={17} />
     </IconButton>

src/site/SiteChecklistClient.tsx

@@ -153,6 +153,7 @@ export default function SiteChecklistClient({
                 <IconButton
                   onClick={refreshSecret}
                   isLoading={isPendingSecret}
+                  spinnerColor="text"
                 >
                   <BiRefresh size={18} />
                 </IconButton>

tailwind.config.js

@@ -24,6 +24,17 @@ module.exports = {
       fontFamily: {
         'mono': ['var(--font-ibm-plex-mono)', ...defaultTheme.fontFamily.mono],
       },
+      animation: {
+        'rotate-pulse':
+          'rotate-pulse 0.75s linear infinite normal both running',
+      },
+      keyframes: {
+        'rotate-pulse': {
+          '0%': { rotate: '0deg', scale: '1' },
+          '50%': { rotate: '180deg', scale: '0.8' },
+          '100%': { rotate: '360deg', scale: '1' },
+        },
+      },
     },
   },
   plugins: [