🐬 sow loading screen only after 200ms

this removes annoying flashing pages in most cases
bugbakery · Dec 3, 2023 · 170129f · 170129f
1 parent 031dbda
commit 170129f
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/frontend/src/pages/loading.tsx b/frontend/src/pages/loading.tsx
@@ -1,9 +1,18 @@
+import { useEffect, useState } from 'react';
 import { AppCenter } from '../components/app';
+import clsx from 'clsx';
 
 export function LoadingPage() {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setVisible(true);
+    }, 200);
+  }, []);
+
   return (
     <AppCenter>
-      <div className="flex flex-col items-center gap-6">
+      <div className={clsx(visible ? 'flex flex-col items-center gap-6' : 'hidden')}>
         <h1 className="font-medium text-4xl">Loading...</h1>
         <p>Transcribee is currently loading...</p>
       </div>