From 8084c7415e1af3caa99605e72decaaa2f2ea5155 Mon Sep 17 00:00:00 2001
From: franco sanchez <franco_genta@hotmail.com>
Date: Wed, 6 Nov 2024 19:56:42 -0300
Subject: [PATCH] chore: new skeletons were added to the collections section

---
 .../skeletons/SkeletonACollections.tsx        | 39 +++++++++++++++++++
 .../skeletons/SkeletonDCollection.tsx         | 29 ++++++++++++++
 .../profile/collections/AllCollections.tsx    |  4 +-
 .../profile/collections/CollectionDetail.tsx  | 13 +++++--
 4 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 src/components/skeletons/SkeletonACollections.tsx
 create mode 100644 src/components/skeletons/SkeletonDCollection.tsx

diff --git a/src/components/skeletons/SkeletonACollections.tsx b/src/components/skeletons/SkeletonACollections.tsx
new file mode 100644
index 0000000..76e9558
--- /dev/null
+++ b/src/components/skeletons/SkeletonACollections.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Flex, Skeleton, Stack } from '@chakra-ui/react';
+
+import { MyContainer } from '@components/ui/MyContainer';
+import { MySimpleGrid } from '@components/ui/MySimpleGrid';
+
+export function SkeletonACollections() {
+  const Cards = Array.from({ length: 6 }, (_, index) => (
+    <Stack key={index} spacing='2' mb='10'>
+      <Skeleton
+        w={{ base: '150px', sm: '250px' }}
+        h={{ base: '200px', sm: '210px' }}
+        rounded='lg'
+      ></Skeleton>
+    </Stack>
+  ));
+
+  return (
+    <>
+      <Skeleton py={{ base: 16, md: '80px' }} />
+      <Flex m='0 auto'>
+        <Flex
+          w={{ base: '1315px', '2xl': '1580px' }}
+          mt='4'
+          pb='4'
+          px={{ base: '6', md: '20', sm: '10' }}
+          justify='space-between'
+          align='center'
+        >
+          <Skeleton w='120px' h='20px' />
+          <Skeleton w='150px' h='30px' rounded='lg' />
+        </Flex>
+      </Flex>
+      <MyContainer>
+        <MySimpleGrid>{Cards}</MySimpleGrid>
+      </MyContainer>
+    </>
+  );
+}
diff --git a/src/components/skeletons/SkeletonDCollection.tsx b/src/components/skeletons/SkeletonDCollection.tsx
new file mode 100644
index 0000000..37bd5c9
--- /dev/null
+++ b/src/components/skeletons/SkeletonDCollection.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Flex, Skeleton } from '@chakra-ui/react';
+
+import { SkeletonContainer } from './SkeletonContainer';
+
+export function SkeletonDCollection() {
+  return (
+    <>
+      <Skeleton py={{ base: 16, md: '80px' }} />
+      <Flex m='0 auto'>
+        <Flex
+          w={{ base: '1300px', '2xl': '1580px' }}
+          mt='4'
+          pb='4'
+          px={{ base: '6', md: '16', sm: '10' }}
+          justify='space-between'
+          align='center'
+        >
+          <Skeleton w='100px' h='30px' rounded='lg' />
+          <Flex gap='3' mr='3'>
+            <Skeleton w='140px' h='30px' rounded='lg' />
+            <Skeleton w='150px' h='30px' rounded='lg' />
+          </Flex>
+        </Flex>
+      </Flex>
+      <SkeletonContainer />
+    </>
+  );
+}
diff --git a/src/pages/profile/collections/AllCollections.tsx b/src/pages/profile/collections/AllCollections.tsx
index e99531b..bc8a02b 100644
--- a/src/pages/profile/collections/AllCollections.tsx
+++ b/src/pages/profile/collections/AllCollections.tsx
@@ -23,6 +23,7 @@ import { ModalCollection } from '@components/modals/ModalCollection';
 import { useCollections } from '@hooks/queries';
 import { useAuth } from '@contexts/AuthContext';
 import { parseDate } from '@utils/utils';
+import { SkeletonACollections } from '@components/skeletons/SkeletonACollections';
 
 export function AllCollections() {
   const bgColorButton = useColorModeValue('green.500', 'green.700');
@@ -32,10 +33,9 @@ export function AllCollections() {
   const uid = currentUser?.uid;
   const { data, refetch, isPending: isPendingData } = useCollections(uid);
   let collectionsUI;
-  let spinnerUI;
 
   if (isPendingData) {
-    spinnerUI = <Spinner />;
+    return <SkeletonACollections />;
   }
 
   if (!data || !data?.collections || data?.collections.length === 0) {
diff --git a/src/pages/profile/collections/CollectionDetail.tsx b/src/pages/profile/collections/CollectionDetail.tsx
index d439179..46bafbc 100644
--- a/src/pages/profile/collections/CollectionDetail.tsx
+++ b/src/pages/profile/collections/CollectionDetail.tsx
@@ -12,13 +12,14 @@ import { MyContainer } from '@components/ui/MyContainer';
 import { useAuth } from '@contexts/AuthContext';
 import { MdOutlineExplore } from 'react-icons/md';
 import { FiArrowLeft } from 'react-icons/fi';
+import { SkeletonDCollection } from '@components/skeletons/SkeletonDCollection';
 
 export function CollectionDetail() {
   const { collectionId } = useParams();
   const navigate = useNavigate();
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
-  const { data, isPending } = useCollectionDetail(collectionId);
+  const { data, isPending: isPendingData } = useCollectionDetail(collectionId);
   const { mutate, isSuccess, isPending: isPendingDelete } = useDeleteCollections();
   let asideAndCardsUI;
 
@@ -28,6 +29,10 @@ export function CollectionDetail() {
     }
   }, [isSuccess, navigate]);
 
+  if (isPendingData) {
+    return <SkeletonDCollection />;
+  }
+
   function deleteCollection(id: string) {
     mutate([uid, id]);
   }
@@ -119,7 +124,7 @@ export function CollectionDetail() {
           justify='space-between'
           align='center'
         >
-          <Button fontWeight='normal' w='90px' onClick={handleGoBack}>
+          <Button fontWeight='normal' w='90px' size='sm' onClick={handleGoBack}>
             <Flex align='center' justify='center'>
               <Icon as={FiArrowLeft} boxSize='4' mr='1' />
               Volver
@@ -128,7 +133,7 @@ export function CollectionDetail() {
           <Flex gap='3'>
             <Button
               // onClick={() => deleteCollection(data?.id)}
-              fontSize='sm'
+              size='sm'
               fontWeight='normal'
               loadingText='Editando...'
               isLoading={isPendingDelete}
@@ -138,7 +143,7 @@ export function CollectionDetail() {
             </Button>
             <Button
               onClick={() => deleteCollection(data?.id)}
-              fontSize='sm'
+              size='sm'
               fontWeight='normal'
               bg='red.500'
               color='white'