From 6e62c30d68c051ec267088767a93808b746d05f1 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:53:14 +0100
Subject: [PATCH] enhancement(web): pending component placement (#1402)

---
 web/src/routes.tsx            |  4 ++--
 web/src/screens/Dashboard.tsx | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/routes.tsx b/web/src/routes.tsx
index c1ceb7a..8c10ed9 100644
--- a/web/src/routes.tsx
+++ b/web/src/routes.tsx
@@ -316,7 +316,7 @@ export const AuthRoute = createRoute({
 
 function AuthenticatedLayout() {
   return (
-    <div className="min-h-screen">
+    <div className="flex flex-col min-h-screen">
       <Header/>
       <Outlet/>
     </div>
@@ -364,7 +364,7 @@ const routeTree = RootRoute.addChildren([
 export const Router = createRouter({
   routeTree,
   defaultPendingComponent: () => (
-    <div className="absolute top-1/4 left-1/2 !border-0">
+    <div className="flex flex-grow items-center justify-center col-span-9">
       <RingResizeSpinner className="text-blue-500 size-24"/>
     </div>
   ),
diff --git a/web/src/screens/Dashboard.tsx b/web/src/screens/Dashboard.tsx
index 990e794..6e82f7c 100644
--- a/web/src/screens/Dashboard.tsx
+++ b/web/src/screens/Dashboard.tsx
@@ -7,8 +7,10 @@ import { Stats } from "./dashboard/Stats";
 import { ActivityTable } from "./dashboard/ActivityTable";
 
 export const Dashboard = () => (
-  <div className="my-6 max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
-    <Stats />
-    <ActivityTable />
-  </div>
+  <main>
+    <div className="my-6 max-w-screen-xl mx-auto pb-6 px-2 sm:px-6 lg:pb-16 lg:px-8">
+      <Stats />
+      <ActivityTable />
+    </div>
+  </main>
 );