TheSurahPage.tsx: place Timer below Stream

src/js/components/TheQuran/Timer.tsx

@@ -21,8 +21,8 @@ export function Timer({surah, ayah, stream, setStream}: TimerProps) {
     }
   }, [ms]);
   return (
-    <span className="timer">
+    <div className="timer">
       {(ms / 1000).toFixed(1)}
-    </span>
+    </div>
   );
 }

src/js/pages/TheSurahPage.tsx

@@ -35,16 +35,19 @@ function TheSurahPage({locale, surahId}: PageProps) {
             <option value="moon">The Moon 🌛</option>
             <option value="leaf">The Leaf 🌿</option>
           </select>
-          <Timer
+          <span></span>
-            surah={surah}
-            ayah={surah.ayat[stream.length - 1]}
-            setStream={setStream}
-            stream={stream}
-          />
         </div>
       }
       {streamIsLoaded && <AboutSurah surah={surah}/>}
       {streamIsLoaded && <Stream surah={surah} stream={stream}/>}
+      {streamIsLoaded && stream.length < surah.numberOfAyah &&
+        <Timer
+          surah={surah}
+          ayah={surah.ayat[stream.length - 1]}
+          setStream={setStream}
+          stream={stream}
+        />
+      }
     </div>
   );
 }