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 - } - - if (isError) { - return - } - return ( - - {blocks.blocks.map((block, i) => ( - - ))} - - + + } + skeletonProps={{ length: blockListSize }} + /> + ) }