From 350bcbedd1b7afbfe45d0dfb61620b608e57f190 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Fri, 29 Sep 2023 20:40:57 -0300
Subject: [PATCH] fix(ui): remove infinite sound loading animation

---
 src/components/sound/index.tsx | 12 ++----------
 src/components/sound/styles.ts |  6 +-----
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/sound/index.tsx b/src/components/sound/index.tsx
index e551ad7f..b0d40262 100644
--- a/src/components/sound/index.tsx
+++ b/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)}
       >
diff --git a/src/components/sound/styles.ts b/src/components/sound/styles.ts
index 2286de6f..d3bcd4e9 100644
--- a/src/components/sound/styles.ts
+++ b/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: [