diff --git a/src/components/Blocks/BlocksList.tsx b/src/components/Blocks/BlocksList.tsx index cc05f4f..adb1be9 100644 --- a/src/components/Blocks/BlocksList.tsx +++ b/src/components/Blocks/BlocksList.tsx @@ -78,7 +78,7 @@ export const PaginatedBlocksList = () => { const isLoading = isLoadingStats || isLoadingBlocks if (isLoading) { - return + return } if (!blocks || blocks?.length === 0 || isError) { diff --git a/src/components/Layout/Loading.tsx b/src/components/Layout/Loading.tsx index f8c4b05..7799381 100644 --- a/src/components/Layout/Loading.tsx +++ b/src/components/Layout/Loading.tsx @@ -1,4 +1,14 @@ -import { Card, CardBody, SkeletonText, Spinner, Square, Stack, Text } from '@chakra-ui/react' +import { + Card, + CardBody, + Flex, + SkeletonCircle, + SkeletonText, + SkeletonTextProps, + Spinner, + Square, + Text, +} from '@chakra-ui/react' import { Trans } from 'react-i18next' export const Loading = () => ( @@ -10,14 +20,28 @@ export const Loading = () => ( ) -export const LoadingCards = ({ length = 4 }: { length?: number }) => ( - +export const LoadingCards = ({ + length = 4, + skeletonCircle, + ...rest +}: { + length?: number + skeletonCircle?: boolean +} & SkeletonTextProps) => ( + <> {Array.from({ length }).map((_, i) => ( - + + {skeletonCircle && ( + <> + + + + + )} - + ))} - + ) diff --git a/src/components/Organizations/List.tsx b/src/components/Organizations/List.tsx index 965b1d3..8f60384 100644 --- a/src/components/Organizations/List.tsx +++ b/src/components/Organizations/List.tsx @@ -50,7 +50,7 @@ export const PaginatedOrganizationsList = () => { const isLoading = isLoadingCount || isLoadingOrgs if (isLoading || (query && isFetching)) { - return + return } if (!orgs || orgs?.organizations.length === 0 || isError) { diff --git a/src/components/Process/ProcessList.tsx b/src/components/Process/ProcessList.tsx index a6f7692..8ba0084 100644 --- a/src/components/Process/ProcessList.tsx +++ b/src/components/Process/ProcessList.tsx @@ -120,7 +120,7 @@ export const PaginatedProcessList = () => { const isLoading = isLoadingCount || isLoadingProcesses if (isLoading || (isFetching && !isEmpty(processFilters))) { - return + return } if (!processes || processes?.elections.length === 0 || isError) { diff --git a/src/components/Transactions/TransactionList.tsx b/src/components/Transactions/TransactionList.tsx index a3e28aa..1df17a9 100644 --- a/src/components/Transactions/TransactionList.tsx +++ b/src/components/Transactions/TransactionList.tsx @@ -114,7 +114,7 @@ const TransactionsList = ({ }) => { return ( <> - {isLoading && } + {isLoading && } {!data || data?.transactions.length === 0 || (isError && )} {data && data.transactions.length > 0 && (