Skip to content

Commit

Permalink
chore: new skeletons were added to the collections section
Browse files Browse the repository at this point in the history
  • Loading branch information
Franqsanz committed Nov 6, 2024
1 parent 5930d97 commit 8084c74
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 6 deletions.
39 changes: 39 additions & 0 deletions src/components/skeletons/SkeletonACollections.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
29 changes: 29 additions & 0 deletions src/components/skeletons/SkeletonDCollection.tsx
Original file line number Diff line number Diff line change
@@ -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 />
</>
);
}
4 changes: 2 additions & 2 deletions src/pages/profile/collections/AllCollections.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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) {
Expand Down
13 changes: 9 additions & 4 deletions src/pages/profile/collections/CollectionDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -28,6 +29,10 @@ export function CollectionDetail() {
}
}, [isSuccess, navigate]);

if (isPendingData) {
return <SkeletonDCollection />;
}

function deleteCollection(id: string) {
mutate([uid, id]);
}
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -138,7 +143,7 @@ export function CollectionDetail() {
</Button>
<Button
onClick={() => deleteCollection(data?.id)}
fontSize='sm'
size='sm'
fontWeight='normal'
bg='red.500'
color='white'
Expand Down

0 comments on commit 8084c74

Please sign in to comment.