376 - client - Load session first, before showing layout

Author: ivicac

client/src/App.tsx

@@ -198,6 +198,20 @@ function App() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [authenticated]);
 
+    if (!sessionHasBeenFetched) {
+        return (
+            <div className="flex min-h-screen min-w-full items-center justify-center p-5">
+                <div className="flex animate-pulse space-x-2">
+                    <div className="size-3 rounded-full bg-gray-500"></div>
+
+                    <div className="size-3 rounded-full bg-gray-500"></div>
+
+                    <div className="size-3 rounded-full bg-gray-500"></div>
+                </div>
+            </div>
+        );
+    }
+
     return authenticated ? (
         <div className="flex h-full">
             <MobileSidebar

client/src/pages/home/Home.tsx

@@ -19,6 +19,8 @@ const Home = () => {
     useEffect(() => {
         if (!ff_520) {
             navigate('/automation');
+
+            return;
         }
 
         if (currentType !== undefined) {

client/src/routes.tsx

@@ -165,6 +165,10 @@ export const getRouter = (queryClient: QueryClient) =>
                 },
                 {
                     children: [
+                        {
+                            element: <Home />,
+                            index: true,
+                        },
                         {
                             children: [
                                 {
@@ -379,10 +383,6 @@ export const getRouter = (queryClient: QueryClient) =>
                             errorElement: <ErrorPage />,
                             path: 'embedded',
                         },
-                        {
-                            element: <Home />,
-                            index: true,
-                        },
                     ],
                     path: '/',
                 },