hooks/useSurah.ts: return 'surahIsLoaded'

src/js/hooks/useSurah.ts

@@ -2,17 +2,18 @@ import { useState, useEffect } from "react";
 import { Quran } from "lib/Quran";
 
 export default function(locale: string, surahByNumber: number) {
-  const [loading, setLoading] = useState(true);
   const [surah, setSurah] = useState(null);
 
   useEffect(() => {
     (async () => {
       const res  = await fetch(`/json/${locale}/${surahByNumber}.json`);
       const json = await res.json();
-      setLoading(false);
       setSurah(Quran.Surah.fromJSON(json.shift(), json));
     })();
   }, []);
 
-  return [loading, surah];
+  return {
+    surah,
+    surahIsLoaded: surah !== null,
+  };
 }

src/js/pages/TheSurahPage.tsx

@@ -6,22 +6,23 @@ import { Stream } from "components/TheQuran/Stream";
 import classNames from "classnames";
 
 function TheSurahPage() {
-  const [loading, surah] = useSurah("en", 1);
+  const { surahIsLoaded, surah } = useSurah("en", 1);
   const [stream, setStream] = useState([]);
   const [theme , setTheme] = useState("moon");
+  const streamIsLoaded = !!stream.length;
 
   useEffect(() => {
-    if (surah) {
-      setStream([surah.ayat[stream.length]])
+    if (surahIsLoaded) {
+      setStream([surah.ayat[stream.length]]);
     }
-  }, [surah]);
+  }, [surahIsLoaded]);
 
   return (
     <div className={classNames(theme, "theme")}>
       <div className="flex-image">
         <div className="image"></div>
       </div>
-      {stream.length &&
+      {streamIsLoaded &&
         <div className="flex-row">
           <span></span>
           <select name="theme" value={theme} onChange={(e) => setTheme(e.target.value)}>
@@ -36,7 +37,7 @@ function TheSurahPage() {
           />
         </div>
       }
-      {stream.length && <Stream surah={surah} stream={stream}/>}
+      {streamIsLoaded && <Stream surah={surah} stream={stream}/>}
     </div>
   );
 }