chore: a new skeleton was created

src/components/PrivateRoute.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { useAuth } from '@contexts/AuthContext';
-import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
+import { SkeletonMain } from '@components/skeletons/SkeletonMain';
 
 export function PrivateRoute({ children }: { children: React.ReactNode }) {
   const { currentUser, loading } = useAuth();
 
   if (loading) {
-    return <SkeletonAllBooks />;
+    return <SkeletonMain />;
   }
 
   return currentUser ? <>{children}</> : <Navigate to='/login' />;

src/components/skeletons/SkeletonMain.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Skeleton, Stack } from '@chakra-ui/react';
+
+export function SkeletonMain() {
+  return (
+    <>
+      <Stack spacing='4'>
+        <Skeleton py={{ base: 16, md: 20 }} />
+        <Skeleton h='100vh' />
+      </Stack>
+    </>
+  );
+}

src/pages/layout/Layout.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
-import { Skeleton, Stack } from '@chakra-ui/react';
 
+import { SkeletonMain } from '@components/skeletons/SkeletonMain';
 import { Nav } from '@components/nav/Nav';
 import { Footer } from '@components/Footer';
 import { ScrollToTop } from '@utils/ScrollToTop';
@@ -11,14 +11,7 @@ export function Layout() {
     <>
       <ScrollToTop>
         <Nav />
-        <Suspense
-          fallback={
-            <Stack spacing='4'>
-              <Skeleton py={{ base: 16, md: 20 }} />
-              <Skeleton h='100vh' />
-            </Stack>
-          }
-        >
+        <Suspense fallback={<SkeletonMain />}>
           <Outlet />
         </Suspense>
         <Footer />