Merge pull request #141 from ReflectsLight/add_spinner

Add spinner

src/css/components/Shape.scss

@@ -36,3 +36,45 @@
     left: 1.5px;
   }
 }
+
+.loading {
+  display: inline-block;
+  position: relative;
+  width: 4px;
+  height: 4px;
+  right: 38px;
+
+  div {
+    display: inline-block;
+    position: absolute;
+    left: 8px;
+    width: 6px;
+    animation: loading 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  }
+
+  div:nth-child(1) {
+    left: 12px;
+    animation-delay: -0.24s;
+  }
+
+  div:nth-child(2) {
+    left: 20px;
+    animation-delay: -0.12s;
+  }
+
+  div:nth-child(3) {
+    left: 28px;
+    animation-delay: 0;
+  }
+}
+
+@keyframes loading {
+  0% {
+    top: 4px;
+    height: 8px;
+  }
+  50%, 100% {
+    top: 8px;
+    height: 4px;
+  }
+}

src/css/themes/leaf/pages/surah/_stream.scss

@@ -32,4 +32,8 @@
     background: unset;
     fill: $green;
   }
+
+  .row .loading div {
+    background: $green;
+  }
 }

src/css/themes/moon/pages/surah/_stream.scss

@@ -39,4 +39,8 @@
       stroke-width: 5;
     }
   }
+
+  .row .loading div {
+    background: $gold;
+  }
 }

src/js/components/Shape.tsx

@@ -134,3 +134,13 @@ export function RefreshShape({ onClick }: Props) {
     </svg>
   );
 }
+
+export function LoadingShape() {
+  return (
+    <div className="loading">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}

src/js/components/Timer.tsx

@@ -42,7 +42,7 @@ export function Timer({
       const tid = setTimeout(() => setMs(ms - 100), 100);
       return () => clearTimeout(tid);
     }
-  }, [isStalled, isPaused, soundOn, ms]);
+  }, [soundOn, isStalled, isPaused, ms]);
 
   return <div className="timer">{formatNumber(ms / 1000, locale)}</div>;
 }

src/js/pages/surah/stream.tsx

@@ -13,6 +13,7 @@ import {
   SoundOnShape,
   SoundOffShape,
   RefreshShape,
+  LoadingShape,
 } from "components/Shape";
 import * as Quran from "lib/Quran";
 import { Slice } from "lib/Quran/Slice";
@@ -179,6 +180,11 @@ function SurahStream({ node, reciters, locale, slice, paused, t }: Props) {
         )}
         {readyToRender && endOfStream && <RefreshShape onClick={() => setStream([])} />}
       </div>
+      {readyToRender && soundOn && isStalled && (
+        <div className="row justify-end">
+          <LoadingShape />
+        </div>
+      )}
       {readyToRender && soundOn && (
         <audio ref={audioRef} src={getAudioURL(reciter, surah, stream)} />
       )}