fix: don't make text move in loading screens

zardoy · Oct 30, 2024 · 84b3f89 · 84b3f89
1 parent 03c6a3f
commit 84b3f89
Showing 1 changed file with 24 additions and 16 deletions.
diff --git a/src/react/AppStatus.tsx b/src/react/AppStatus.tsx
@@ -14,27 +14,26 @@ export default ({
   actionsSlot = null as React.ReactNode | null,
   children
 }) => {
-  const [loadingDots, setLoadingDots] = useState('')
+  const [loadingDotIndex, setLoadingDotIndex] = useState(0)
 
   useEffect(() => {
-    void statusRunner()
-  }, [])
-
-  const statusRunner = async () => {
-    const array = ['.', '..', '...', '']
-
-    const timer = async (ms) => new Promise((resolve) => { setTimeout(resolve, ms) })
+    const statusRunner = async () => {
+      const timer = async (ms) => new Promise((resolve) => { setTimeout(resolve, ms) })
 
-    const load = async () => {
-      // eslint-disable-next-line no-constant-condition
-      for (let i = 0; true; i = (i + 1) % array.length) {
-        setLoadingDots(array[i])
-        await timer(500) // eslint-disable-line no-await-in-loop
+      const load = async () => {
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          setLoadingDotIndex(i => (i + 1) % 4)
+          await timer(500) // eslint-disable-line no-await-in-loop
+        }
       }
+
+      void load()
     }
 
-    void load()
-  }
+    void statusRunner()
+  }, [])
+
 
   return (
     <Screen
@@ -48,7 +47,16 @@ export default ({
           >
             {status}
           </span>
-          {isError || hideDots ? '' : loadingDots}
+          <div style={{ display: 'inline-flex', gap: '1px', }} hidden={hideDots || isError}>
+            {
+              [...'...'].map((dot, i) => {
+                return <span
+                  key={i} style={{
+                    visibility: loadingDotIndex <= i ? 'hidden' : 'visible',
+                  }}>{dot}</span>
+              })
+            }
+          </div>
           <p className={styles['potential-problem']}>{description}</p>
           <p className={styles['last-status']}>{lastStatus ? `Last status: ${lastStatus}` : lastStatus}</p>
         </>