Fix process card loading skeletons (#64)

* Fix process card loading skeletons

* Implement custom skeletons

src/components/Blocks/BlocksList.tsx

@@ -78,7 +78,7 @@ export const PaginatedBlocksList = () => {
   const isLoading = isLoadingStats || isLoadingBlocks
 
   if (isLoading) {
-    return <LoadingCards />
+    return <LoadingCards noOfLines={2} />
   }
 
   if (!blocks || blocks?.length === 0 || isError) {

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 = () => (
   </Square>
 )
 
-export const LoadingCards = ({ length = 4 }: { length?: number }) => (
-  <Stack>
+export const LoadingCards = ({
+  length = 4,
+  skeletonCircle,
+  ...rest
+}: {
+  length?: number
+  skeletonCircle?: boolean
+} & SkeletonTextProps) => (
+  <>
     {Array.from({ length }).map((_, i) => (
-      <Card key={i}>
+      <Card key={i} direction='row'>
+        {skeletonCircle && (
+          <>
+            <Flex alignItems='center' flexWrap='wrap' pl={4}>
+              <SkeletonCircle size='12' />
+            </Flex>
+          </>
+        )}
         <CardBody>
-          <SkeletonText noOfLines={3} spacing='3' skeletonHeight='3' />
+          <SkeletonText noOfLines={3} spacing={3} skeletonHeight={3} py={2} {...rest} />
         </CardBody>
       </Card>
     ))}
-  </Stack>
+  </>
 )

src/components/Organizations/List.tsx

@@ -50,7 +50,7 @@ export const PaginatedOrganizationsList = () => {
   const isLoading = isLoadingCount || isLoadingOrgs
 
   if (isLoading || (query && isFetching)) {
-    return <LoadingCards />
+    return <LoadingCards skeletonCircle />
   }
 
   if (!orgs || orgs?.organizations.length === 0 || isError) {

src/components/Process/ProcessList.tsx

@@ -120,7 +120,7 @@ export const PaginatedProcessList = () => {
   const isLoading = isLoadingCount || isLoadingProcesses
 
   if (isLoading || (isFetching && !isEmpty(processFilters))) {
-    return <LoadingCards />
+    return <LoadingCards spacing={4} pl={4} skeletonHeight={4} />
   }
 
   if (!processes || processes?.elections.length === 0 || isError) {

src/components/Transactions/TransactionList.tsx

@@ -114,7 +114,7 @@ const TransactionsList = ({
 }) => {
   return (
     <>
-      {isLoading && <LoadingCards />}
+      {isLoading && <LoadingCards spacing={4} />}
       {!data || data?.transactions.length === 0 || (isError && <LoadingError error={error} />)}
       {data && data.transactions.length > 0 && (
         <RoutedPaginationProvider totalPages={totalPages} path={RoutePath.TransactionsList}>