From 5e26059724930b07d7e847e263651c5f4ccd3801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateus=20Felipe=20Gon=C3=A7alves?=
 <mateusfelipefg77@gmail.com>
Date: Mon, 15 Aug 2022 11:26:17 -0300
Subject: [PATCH] feat: add shimmer effect load

---
 src/components/Sound/index.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Sound/index.tsx b/src/components/Sound/index.tsx
index 695e346a..f86f19e2 100644
--- a/src/components/Sound/index.tsx
+++ b/src/components/Sound/index.tsx
@@ -22,6 +22,7 @@ export const Sound: React.FC<ISound> = ({ name, iconFile, audioFile }) => {
 
   const [soundIsActive, setSoundIsActive] = useState(false)
   const [howlSoundInstance, setHowlSoundInstance] = useState<Howl | null>(null)
+  const [soundIsLoading, setSoundIsLoading] = useState(true)
   const [currentSoundVolume, setCurrentSoundVolume] = useState(1)
 
   useEffect(() => {
@@ -29,13 +30,15 @@ export const Sound: React.FC<ISound> = ({ name, iconFile, audioFile }) => {
       new Howl({
         src: `./sounds/${audioFile.name}`,
         loop: true,
-        html5: true
+        onload: () => {
+          setSoundIsLoading(false)
+        }
       })
     )
   }, [])
 
   async function toggleSoundState() {
-    if (howlSoundInstance) {
+    if (howlSoundInstance && !soundIsLoading) {
       if (soundIsActive) {
         howlSoundInstance.fade(currentSoundVolume, 0, FADE_TIME_MS)
         await sleep(FADE_TIME_MS)
@@ -60,8 +63,8 @@ export const Sound: React.FC<ISound> = ({ name, iconFile, audioFile }) => {
     <SoundComponent title={name}>
       <SoundButton
         id={`${name}-button`}
-        className={`${
-          soundIsActive ? 'selected' : ''
+        className={`${soundIsActive ? 'selected' : ''} ${
+          soundIsLoading && 'disabled'
         } umami--click--${name}-sound`}
         onClick={() => toggleSoundState()}
       >