From 11bd1105fbf325a2c13f3739ddaf2be51f3e273b Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 23 Oct 2023 14:46:09 -0300
Subject: [PATCH] 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                 |  4 ++++
 src/js/components/LanguageSelect.tsx |  2 ++
 src/js/pages/SurahIndex.tsx          | 12 ++++++++++--
 src/js/pages/SurahStream.tsx         | 12 ++++++++++--
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/css/_layout.scss b/src/css/_layout.scss
index 2885d538d..81d320ab8 100644
--- a/src/css/_layout.scss
+++ b/src/css/_layout.scss
@@ -86,3 +86,7 @@ body .root .content.ar {
     font-size: xx-large;
   }
 }
+
+.invisible {
+  display: none !important;
+}
diff --git a/src/js/components/LanguageSelect.tsx b/src/js/components/LanguageSelect.tsx
index 7aa53d730..b4083b6c3 100644
--- a/src/js/components/LanguageSelect.tsx
+++ b/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}`);
       }}
     >
diff --git a/src/js/pages/SurahIndex.tsx b/src/js/pages/SurahIndex.tsx
index f8d3fbd00..d66dc3d7e 100644
--- a/src/js/pages/SurahIndex.tsx
+++ b/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>
diff --git a/src/js/pages/SurahStream.tsx b/src/js/pages/SurahStream.tsx
index 095d9a16c..df2a604b8 100644
--- a/src/js/pages/SurahStream.tsx
+++ b/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">