feat(ui): add loading animation on sound and pomodoro components

src/components/header/pomodoro/config-modal.tsx

@@ -9,11 +9,13 @@ interface Props {
   displayMinutes: string
   displaySeconds: string
   minutes: string
+  isLoading: boolean
   setMinutes: (minutes: number) => void
 }
 
 export function ConfigModal({
   minutes,
+  isLoading,
   setMinutes,
   displayMinutes,
   displaySeconds
@@ -51,7 +53,8 @@ export function ConfigModal({
         <button
           type="button"
           onClick={openModal}
-          className={display({ theme })}
+          disabled={isLoading}
+          className={display({ theme, isLoading })}
           data-umami-event="Open pomodoro config"
         >
           <div

src/components/header/pomodoro/index.tsx

@@ -97,15 +97,17 @@ export function Pomodoro() {
 
       <button
         title="Reset Pomodoro timer"
+        disabled={isLoadingStorage}
         onClick={resetTimer}
-        className={controlButton({ theme })}
+        className={controlButton({ theme, isLoading: isLoadingStorage })}
         data-umami-event="Reset pomodoro timer"
       >
         <FiRotateCw />
       </button>
 
       <ConfigModal
         minutes={getMinutes(defaultTimeInSec)}
+        isLoading={isLoadingStorage}
         setMinutes={setMinutes}
         displayMinutes={isLoadingStorage ? '-' : getMinutes(remainingTime)}
         displaySeconds={
@@ -116,7 +118,8 @@ export function Pomodoro() {
       <button
         title="Toggle Pomodoro timer"
         onClick={handleToggle}
-        className={controlButton({ theme })}
+        disabled={isLoadingStorage}
+        className={controlButton({ theme, isLoading: isLoadingStorage })}
         data-umami-event="Play/pause pomodoro timer"
       >
         {isTicking ? <FiPause /> : <FiPlay />}

src/components/header/pomodoro/styles.ts

@@ -19,13 +19,21 @@ export const controlButton = tv({
   base: /*tw:*/ 'flex h-8 w-8 items-center justify-center rounded-xl text-base transition-colors',
   variants: {
     theme: {
-      transition: /*tw:*/ 'bg-white/10 hover:bg-white/30',
-      dark: /*tw:*/ 'bg-dark-foreground/10 hover:bg-dark-foreground/30',
-      light: /*tw:*/ 'bg-light-foreground/5 hover:bg-light-foreground/10',
-      'blue-room': /*tw:*/ 'bg-blue-room/10 hover:bg-blue-room/30',
-      train: /*tw:*/ 'bg-train/10 hover:bg-train/30',
-      waterfall: /*tw:*/ 'bg-waterfall/10 hover:bg-waterfall/30',
-      'camping-fire': /*tw:*/ 'bg-camping-fire/10 hover:bg-camping-fire/30'
+      transition:
+        /*tw:*/ 'bg-white/10 hover:bg-white/30 disabled:hover:bg-white/10',
+      dark: /*tw:*/ 'bg-dark-foreground/10 hover:bg-dark-foreground/30 disabled:hover:bg-dark-foreground/10',
+      light:
+        /*tw:*/ 'bg-light-foreground/5 hover:bg-light-foreground/10 disabled:hover:bg-light-foreground/5',
+      'blue-room':
+        /*tw:*/ 'bg-blue-room/10 hover:bg-blue-room/30 disabled:hover:bg-blue-room/10',
+      train: /*tw:*/ 'bg-train/10 hover:bg-train/30 disabled:hover:bg-train/10',
+      waterfall:
+        /*tw:*/ 'bg-waterfall/10 hover:bg-waterfall/30 disabled:hover:bg-waterfall/10',
+      'camping-fire':
+        /*tw:*/ 'bg-camping-fire/10 hover:bg-camping-fire/30 disabled:hover:bg-camping-fire/10'
+    },
+    isLoading: {
+      true: /*tw:*/ 'animate-pulse cursor-wait'
     }
   }
 })
@@ -34,13 +42,21 @@ export const display = tv({
   base: /*tw:*/ 'rounded-xl transition-colors',
   variants: {
     theme: {
-      transition: /*tw:*/ 'bg-white/10 hover:bg-white/30',
-      dark: /*tw:*/ 'bg-dark-foreground/10 hover:bg-dark-foreground/30',
-      light: /*tw:*/ 'bg-light-foreground/5 hover:bg-light-foreground/10',
-      'blue-room': /*tw:*/ 'bg-blue-room/10 hover:bg-blue-room/30',
-      train: /*tw:*/ 'bg-train/10 hover:bg-train/30',
-      waterfall: /*tw:*/ 'bg-waterfall/10 hover:bg-waterfall/30',
-      'camping-fire': /*tw:*/ 'bg-camping-fire/10 hover:bg-camping-fire/30'
+      transition:
+        /*tw:*/ 'bg-white/10 hover:bg-white/30 disabled:hover:bg-white/10',
+      dark: /*tw:*/ 'bg-dark-foreground/10 hover:bg-dark-foreground/30 disabled:hover:bg-dark-foreground/10',
+      light:
+        /*tw:*/ 'bg-light-foreground/5 hover:bg-light-foreground/10 disabled:hover:bg-light-foreground/10',
+      'blue-room':
+        /*tw:*/ 'bg-blue-room/10 hover:bg-blue-room/30 disabled:hover:bg-blue-room/10',
+      train: /*tw:*/ 'bg-train/10 hover:bg-train/30 disabled:hover:bg-train/10',
+      waterfall:
+        /*tw:*/ 'bg-waterfall/10 hover:bg-waterfall/30 disabled:hover:bg-waterfall/10',
+      'camping-fire':
+        /*tw:*/ 'bg-camping-fire/10 hover:bg-camping-fire/30 disabled:hover:bg-camping-fire/10'
+    },
+    isLoading: {
+      true: /*tw:*/ 'animate-pulse cursor-wait'
     }
   }
 })

src/components/sound/index.tsx

@@ -9,7 +9,7 @@ import { SoundState, useSoundsStateStore } from '@/stores/sounds-state-store'
 
 import { VolumeController } from './volume-controller'
 import { fadeSound } from './fade-sound'
-import { icon, iconContainer } from './styles'
+import { icon, soundButton } from './styles'
 
 interface SoundButtonProps {
   sound: Sound
@@ -29,6 +29,7 @@ export const SoundButton: React.FC<SoundButtonProps> = ({ sound }) => {
     volume: 1
   })
   const [isUpdatingSoundState, setIsUpdatingSoundState] = useState(false)
+  const [isAvailable, setIsAvailable] = useState(false)
 
   const soundRef = useRef<HTMLAudioElement>()
 
@@ -144,12 +145,22 @@ export const SoundButton: React.FC<SoundButtonProps> = ({ sound }) => {
       title={sound.title}
       className="flex h-24 w-24 flex-col items-center justify-center"
     >
-      <audio ref={soundRef} preload="auto" loop>
+      <audio
+        ref={soundRef}
+        preload="auto"
+        onLoadedData={() => setIsAvailable(true)}
+        loop
+      >
         <source src={sound.file.url} type={sound.file.type} />
       </audio>
       <button
         data-umami-event={sound.title}
-        className={iconContainer({ active: localSoundState.active, theme })}
+        disabled={!isAvailable}
+        className={soundButton({
+          active: localSoundState.active,
+          theme,
+          loading: !isAvailable
+        })}
         onClick={() => setIsUpdatingSoundState(true)}
       >
         <Icon className={icon()} />

src/components/sound/styles.ts

@@ -1,11 +1,8 @@
 import { tv } from 'tailwind-variants'
 
-export const iconContainer = tv({
+export const soundButton = tv({
   base: /*tw:*/ 'flex justify-center items-center w-24 h-24 rounded-xl cursor-pointer transition duration-300 opacity-70 md:hover:opacity-100 md:hover:shadow-sound',
   variants: {
-    active: {
-      true: /*tw:*/ 'rounded-b-none opacity-100 md:shadow-sound '
-    },
     theme: {
       transition: /*tw:*/ 'text-white/90 md:hover:bg-white/10',
       dark: /*tw:*/ 'text-dark-foreground/90 md:hover:bg-dark-foreground/10',
@@ -14,6 +11,12 @@ export const iconContainer = tv({
       train: /*tw:*/ 'text-train/90 md:hover:bg-train/10',
       waterfall: /*tw:*/ 'text-waterfall/90 md:hover:bg-waterfall/10',
       'camping-fire': /*tw:*/ 'text-camping-fire/90 md:hover:bg-camping-fire/10'
+    },
+    active: {
+      true: /*tw:*/ 'rounded-b-none opacity-100 md:shadow-sound'
+    },
+    loading: {
+      true: /*tw:*/ 'animate-pulse cursor-wait md:hover:opacity-70 md:hover:bg-transparent md:hover:shadow-none'
     }
   },
   compoundVariants: [

tailwind.config.js

@@ -39,7 +39,8 @@ module.exports = {
       animation: {
         'background-change': 'background-change 300s 0s infinite',
         'background-change-sm': 'background-change 20s 0s infinite',
-        'show-input': 'show-input .1s 0s'
+        'show-input': 'show-input .1s 0s',
+        loading: 'loading 1.5s 0s infinite'
       },
       keyframes: {
         'background-change': {
@@ -115,6 +116,17 @@ module.exports = {
             transform:
               'translate(0, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))'
           }
+        },
+        loading: {
+          '0%': {
+            opacity: '0.4'
+          },
+          '50%': {
+            opacity: '0.6'
+          },
+          '100%': {
+            opacity: '0.4'
+          }
         }
       }
     },