From 51dc8cb6de5f802a782579ab4baaea17725f28f0 Mon Sep 17 00:00:00 2001
From: shebz2023 <shebelleke@gmail.com>
Date: Fri, 27 Sep 2024 09:00:51 +0200
Subject: [PATCH] fix irrelevant skeletons while fetching

---
 src/Skeletons/Calender.skeleton.tsx |  13 ----
 src/containers/Routes.tsx           | 101 +++++++++++++++++++++++-----
 2 files changed, 83 insertions(+), 31 deletions(-)

diff --git a/src/Skeletons/Calender.skeleton.tsx b/src/Skeletons/Calender.skeleton.tsx
index 2ffc51ba9..d65736bc4 100644
--- a/src/Skeletons/Calender.skeleton.tsx
+++ b/src/Skeletons/Calender.skeleton.tsx
@@ -43,19 +43,6 @@ function CalendarSkeleton() {
             </div>
           ))}
         </div>
-
-        {/* Event List */}
-        <div className="mt-4 space-y-2">
-          {events.map((event) => (
-            <div
-              key={event.id}
-              className="flex items-center justify-between p-2 bg-gray-800 rounded"
-            >
-              <div className="h-4 bg-gray-200 rounded w-3/4" />
-              <div className="h-4 bg-gray-200 rounded w-6" />
-            </div>
-          ))}
-        </div>
       </div>
     </div>
   );
diff --git a/src/containers/Routes.tsx b/src/containers/Routes.tsx
index b6163ecab..d025f6c2e 100644
--- a/src/containers/Routes.tsx
+++ b/src/containers/Routes.tsx
@@ -43,27 +43,64 @@ import RemoveTokenPage from '../utils/RemoveTokenPage';
 function MainRoutes() {
   return (
     <div className="min-h-screen page-layout">
-      <Suspense fallback={<Skeleton />}>
+      <Suspense>
         <Routes>
           <Route path="/*" element={<DashRoutes />} />
           <Route
             path="/"
             element={
               <>
-                <Header />
-                <main className="page-main bg-light-bg dark:bg-dark-frame-bg">
-                  <Outlet />
-                </main>
-                <Footer />
+                <Suspense fallback={<Skeleton />}>
+                  <Header />
+                  <main className="page-main bg-light-bg dark:bg-dark-frame-bg">
+                    <Outlet />
+                  </main>
+                  <Footer />
+                </Suspense>
               </>
             }
           >
-            <Route index element={<Home />} />
-            <Route path="/register/:token" element={<UserRegister />} />
+            <Route
+              index
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <Home />
+                </Suspense>
+              }
+            />
+            <Route
+              path="/register/:token"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <UserRegister />
+                </Suspense>
+              }
+            />
             <Route path="/register-successful" element={<Message />} />
-            <Route path="/signup/org" element={<OrgRegister />} />
-            <Route path="/signup/org/:token" element={<RemoveTokenPage />} />
-            <Route path="/reset-password" element={<ResetPassword />} />
+            <Route
+              path="/signup/org"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <OrgRegister />
+                </Suspense>
+              }
+            />
+            <Route
+              path="/signup/org/:token"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <RemoveTokenPage />
+                </Suspense>
+              }
+            />
+            <Route
+              path="/reset-password"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <ResetPassword />
+                </Suspense>
+              }
+            />
             <Route
               path="/forgot-password/:token"
               element={<ForgotPassword />}
@@ -72,7 +109,9 @@ function MainRoutes() {
               path="/login/org"
               element={
                 <ProtectedRoutes>
-                  <Orglogin />
+                  <Suspense fallback={<Skeleton />}>
+                    <Orglogin />
+                  </Suspense>
                 </ProtectedRoutes>
               }
             />
@@ -80,20 +119,46 @@ function MainRoutes() {
               path="/users/login"
               element={
                 <ProtectedRoutes>
-                  <Adminlogin />
+                  <Suspense fallback={<Skeleton />}>
+                    <Adminlogin />
+                  </Suspense>
                 </ProtectedRoutes>
               }
             />
-            <Route path="/pricing" element={<Pricing />} />
-            <Route path="/about" element={<About title={'About Page'} />} />
+            <Route
+              path="/pricing"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <Pricing />{' '}
+                </Suspense>
+              }
+            />
+            <Route
+              path="/about"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <About title={'About Page'} />
+                </Suspense>
+              }
+            />
             <Route
               path="/product"
-              element={<Product title={'Productpage'} />}
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <Product title={'Productpage'} />
+                </Suspense>
+              }
             />
             <Route path="/docs/org-signup" element={<SignupOrgDocs />} />
             <Route path="/docs/org-signin" element={<SigninOrgDocs />} />
-            <Route path="/docs/getting-started" element={<UsersDocs />} />
-            <Route path="/redirect" element={<RedirectHandler />} />
+            <Route
+              path="/docs/getting-started"
+              element={
+                <Suspense fallback={<Skeleton />}>
+                  <UsersDocs />
+                </Suspense>
+              }
+            />
             <Route path="/noredirect" element={<Noredirect />} />
           </Route>
           <Route path="*" element={<Error />} />