From 36ac277dc25627bdbb635a0cb827317b3934b277 Mon Sep 17 00:00:00 2001
From: selankon <selankon@selankon.xyz>
Date: Mon, 9 Sep 2024 05:11:27 -0500
Subject: [PATCH] Fix latest blocks loading skeleton (#128)

---
 src/components/Stats/LatestBlocks.tsx | 46 ++++++++-------------------
 1 file changed, 13 insertions(+), 33 deletions(-)

diff --git a/src/components/Stats/LatestBlocks.tsx b/src/components/Stats/LatestBlocks.tsx
index b22a27a..486b7a8 100644
--- a/src/components/Stats/LatestBlocks.tsx
+++ b/src/components/Stats/LatestBlocks.tsx
@@ -1,50 +1,30 @@
-import { Button, Stack } from '@chakra-ui/react'
+import { Flex } from '@chakra-ui/react'
 import { keepPreviousData } from '@tanstack/react-query'
-import { Trans } from 'react-i18next'
-import { generatePath, Link as RouterLink } from 'react-router-dom'
 import { BlockCard } from '~components/Blocks/BlockCard'
-import { ContentError } from '~components/Layout/ContentError'
-import { LoadingCards } from '~components/Layout/Loading'
-import { RoutePath } from '~constants'
+import { PaginatedAsyncList } from '~components/Layout/AsyncList'
 import { useBlockList } from '~queries/blocks'
-import { useChainInfo } from '~queries/stats'
 
 export const LatestBlocks = () => {
   const blockListSize = 3
 
-  const { data: stats, isLoading: isLoadingStats } = useChainInfo()
-  const {
-    data: blocks,
-    isLoading: isLoadingBlocks,
-    error,
-    isError,
-  } = useBlockList({
+  const { data, isLoading, error, isError } = useBlockList({
     params: {
       page: 0,
       limit: blockListSize,
     },
-    enabled: !!stats?.height,
     placeholderData: keepPreviousData,
   })
 
-  const isLoading = isLoadingStats || isLoadingBlocks
-
-  if (isLoading || !stats || !stats?.height || !blocks) {
-    return <LoadingCards length={blockListSize} />
-  }
-
-  if (isError) {
-    return <ContentError error={error} />
-  }
-
   return (
-    <Stack spacing={4}>
-      {blocks.blocks.map((block, i) => (
-        <BlockCard key={i} block={block} compact />
-      ))}
-      <Button as={RouterLink} to={generatePath(RoutePath.BlocksList)} bgColor='accent1' color={'white'}>
-        <Trans i18nKey='stats.view_all_blocks'>View all blocks</Trans>
-      </Button>
-    </Stack>
+    <Flex direction={'column'} gap={7}>
+      <PaginatedAsyncList
+        isLoading={isLoading}
+        elements={data?.blocks}
+        isError={isError}
+        error={error}
+        component={({ element }) => <BlockCard block={element} />}
+        skeletonProps={{ length: blockListSize }}
+      />
+    </Flex>
   )
 }