Avoid re-render glitches

When changing between languages, the transition between pages can
cause UI glitches, where text could change font for a brief second.

The fix makes the main content invisible by default, and applies the
'invisible' class just before switching languages. After the main
content has rendered, the 'invisible' class is removed. These changes
effectively remove the UI glitches that were present when switching
languages.

src/css/_layout.scss

@@ -86,3 +86,7 @@ body .root .content.ar {
     font-size: xx-large;
   }
 }
+
+.invisible {
+  display: none !important;
+}

src/js/components/LanguageSelect.tsx

@@ -20,6 +20,8 @@ export function LanguageSelect({ locale, path = "" }: Props) {
             return `${path}/`;
           }
         })();
+        const content = document.querySelector(".content.theme");
+        content.classList.add("invisible");
         location.replace(`/${locale}/${newPath}`);
       }}
     >

src/js/pages/SurahIndex.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import ReactDOM from "react-dom/client";
 import classNames from "classnames";
 
@@ -16,9 +16,17 @@ interface Props {
 
 function SurahIndex({ locale, surahs, t }: Props) {
   const [theme, setTheme] = useTheme();
+  const ref = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (ref.current) {
+      const div = ref.current;
+      div.classList.remove("invisible");
+    }
+  }, []);
 
   return (
-    <div className={classNames("content", "theme", theme, locale)}>
+    <div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
       <a href={`/${locale}/`} className="row title">
         {t(locale, "TheNobleQuran")}
       </a>

src/js/pages/SurahStream.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import ReactDOM from "react-dom/client";
 import classNames from "classnames";
 
@@ -40,6 +40,14 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
   const readyToRender = stream.length > 0;
   const ayah = stream[stream.length - 1];
   const hasCompactLayout = ["ar"].includes(locale);
+  const ref = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (ref.current) {
+      const div = ref.current;
+      div.classList.remove("invisible");
+    }
+  }, []);
 
   useEffect(() => {
     setEndOfStream(false);
@@ -47,7 +55,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
   }, [stream.length === 0]);
 
   return (
-    <div className={classNames("content", "theme", theme, locale)}>
+    <div ref={ref} className={classNames("invisible", "content", "theme", theme, locale)}>
       {readyToRender && (
         <>
           <a href={`/${locale}/`} className="row title">