diff --git a/frontend/src/pages/loading.tsx b/frontend/src/pages/loading.tsx
index adccc552..6672185b 100644
--- 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>