From 039b18c4bea9225c24566190eeb55a51a3392cf5 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Tue, 27 Feb 2024 12:50:42 -0300
Subject: [PATCH] chore: a new skeleton was created

---
 src/components/PrivateRoute.tsx           |  4 ++--
 src/components/skeletons/SkeletonMain.tsx | 13 +++++++++++++
 src/pages/layout/Layout.tsx               | 11 ++---------
 3 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 src/components/skeletons/SkeletonMain.tsx

diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx
index b6efb13..7a1697c 100644
--- a/src/components/PrivateRoute.tsx
+++ b/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' />;
diff --git a/src/components/skeletons/SkeletonMain.tsx b/src/components/skeletons/SkeletonMain.tsx
new file mode 100644
index 0000000..a2dfb7c
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/pages/layout/Layout.tsx b/src/pages/layout/Layout.tsx
index d929dfc..8cc202c 100644
--- a/src/pages/layout/Layout.tsx
+++ b/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 />