From 44340164898e8dbcba8da6681ac2352b3198f074 Mon Sep 17 00:00:00 2001
From: Jaro Habiger <jarohabiger@googlemail.com>
Date: Sun, 3 Dec 2023 01:42:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=AC=20remove=20loading=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the loading page was only used in cases where the app loads fast. This IMO improves UX by not flashing unnescessary content
---
 frontend/src/app.tsx           |  7 +++----
 frontend/src/pages/loading.tsx | 21 ---------------------
 frontend/src/pages/page.tsx    |  3 +--
 3 files changed, 4 insertions(+), 27 deletions(-)
 delete mode 100644 frontend/src/pages/loading.tsx

diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index dae7cd97..5d924279 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -10,7 +10,6 @@ import { ModalHolder } from './components/modal';
 import { Helmet } from 'react-helmet';
 import { registerCopyHandler } from './utils/copy_text';
 import { useAuthData } from './utils/auth';
-import { LoadingPage } from './pages/loading';
 import { PagePage } from './pages/page';
 import { AboutPage } from './pages/about';
 import { useGetConfig } from './api/config';
@@ -24,7 +23,7 @@ export function AuthenticatedRoute<T extends DefaultParams = DefaultParams>({
   const { isLoggedIn, hasShareToken, isLoading } = useAuthData();
   const isAuthenticated = isLoggedIn || hasShareToken;
   if (isLoading) {
-    return <Route component={LoadingPage} />;
+    return null;
   }
   if (!isAuthenticated) {
     navigate('/login');
@@ -39,7 +38,7 @@ export function LoggedInRoute<T extends DefaultParams = DefaultParams>({
   const [_, navigate] = useLocation();
   const { isLoggedIn, isLoading } = useAuthData();
   if (isLoading) {
-    return <Route component={LoadingPage} />;
+    return null;
   }
   if (!isLoggedIn) {
     navigate('/login');
@@ -65,7 +64,7 @@ export function LoggedInRedirectRoute<T extends DefaultParams = DefaultParams>({
   if (isLoggedIn) {
     return <Route {...props} />;
   } else {
-    return <Route component={LoadingPage} />;
+    return null;
   }
 }
 
diff --git a/frontend/src/pages/loading.tsx b/frontend/src/pages/loading.tsx
deleted file mode 100644
index 6672185b..00000000
--- a/frontend/src/pages/loading.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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={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>
-    </AppCenter>
-  );
-}
diff --git a/frontend/src/pages/page.tsx b/frontend/src/pages/page.tsx
index 359b9275..f63f7592 100644
--- a/frontend/src/pages/page.tsx
+++ b/frontend/src/pages/page.tsx
@@ -3,7 +3,6 @@ import { AppCenter } from '../components/app';
 import ReactMarkdown from 'react-markdown';
 import { getPage, useGetPage } from '../api/pages';
 import { PageNotFoundPage } from './page_not_found';
-import { LoadingPage } from './loading';
 
 export function PagePage({ params: { pageId } }: RouteComponentProps<{ pageId: string }>) {
   const { data, error } = useGetPage({ page_id: pageId });
@@ -14,7 +13,7 @@ export function PagePage({ params: { pageId } }: RouteComponentProps<{ pageId: s
     }
   }
   if (!data) {
-    return <LoadingPage />;
+    return null;
   }
   return (
     <AppCenter>