fix(ui): remove infinite sound loading animation

src/components/sound/index.tsx

@@ -29,7 +29,6 @@ export const SoundButton: React.FC<SoundButtonProps> = ({ sound }) => {
     volume: 1
   })
   const [isUpdatingSoundState, setIsUpdatingSoundState] = useState(false)
-  const [isAvailable, setIsAvailable] = useState(false)
 
   const soundRef = useRef<HTMLAudioElement>()
 
@@ -145,21 +144,14 @@ 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"
-        onLoadedData={() => setIsAvailable(true)}
-        loop
-      >
+      <audio ref={soundRef} preload="auto" loop>
         <source src={sound.file.url} type={sound.file.type} />
       </audio>
       <button
         data-umami-event={sound.title}
-        disabled={!isAvailable}
         className={soundButton({
           active: localSoundState.active,
-          theme,
-          loading: !isAvailable
+          theme
         })}
         onClick={() => setIsUpdatingSoundState(true)}
       >

src/components/sound/styles.ts

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants'
 
 export const soundButton = tv({
-  base: /*tw:*/ 'flex justify-center items-center w-24 h-24 rounded-xl cursor-pointer transition duration-300 opacity-70',
+  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: {
     theme: {
       transition: /*tw:*/ 'text-white/90 md:hover:bg-white/10',
@@ -14,10 +14,6 @@ export const soundButton = tv({
     },
     active: {
       true: /*tw:*/ 'rounded-b-none opacity-100 md:shadow-sound'
-    },
-    loading: {
-      true: /*tw:*/ 'animate-pulse cursor-wait md:hover:bg-transparent',
-      false: /*tw:*/ 'md:hover:opacity-100 md:hover:shadow-sound'
     }
   },
   compoundVariants: [