fixes2

ui/home/LatestBlocks.tsx

@@ -56,7 +56,9 @@ const LatestBlocks = () => {
     content = (
       <>
         <Skeleton w="100%" h={ 6 } mb={ 9 }/>
-        { Array.from(Array(blocksCount)).map((item, index) => <LatestBlocksItemSkeleton key={ index }/>) }
+        <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 6 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
+          { Array.from(Array(blocksCount)).map((item, index) => <LatestBlocksItemSkeleton key={ index }/>) }
+        </VStack>
       </>
     );
   }
@@ -82,6 +84,9 @@ const LatestBlocks = () => {
             { data.slice(0, blocksCount).map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) }
           </AnimatePresence>
         </VStack>
+        <Flex justifyContent="center">
+          <Link fontSize="sm" href={ link('blocks') }>View all blocks</Link>
+        </Flex>
       </>
     );
   }
@@ -90,9 +95,6 @@ const LatestBlocks = () => {
     <>
       <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest Blocks</Heading>
       { content }
-      <Flex justifyContent="center">
-        <Link fontSize="sm" href={ link('blocks') }>View all blocks</Link>
-      </Flex>
     </>
   );
 };

ui/home/LatestTxs.tsx

-import { Box, Heading, Flex, Link, Text } from '@chakra-ui/react';
+import { Box, Heading, Flex, Link, Text, Skeleton } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -27,34 +27,35 @@ const LatestTransactions = () => {
   if (isLoading) {
     content = (
       <>
+        <Skeleton h="56px" w="100%"/>
         { Array.from(Array(txsCount)).map((item, index) => <LatestTxsItemSkeleton key={ index }/>) }
       </>
     );
   }
 
   if (isError) {
-    content = <Text>There are no transactions. Please reload page.</Text>;
+    content = <Text mt={ 4 }>There are no transactions. Please reload page.</Text>;
   }
 
   if (data) {
+    const txsUrl = link('txs');
     content = (
-      <Box mb={{ base: 3, lg: 6 }}>
-        { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
-      </Box>
+      <>
+        <LatestTxsNotice/>
+        <Box mb={{ base: 3, lg: 6 }}>
+          { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
+        </Box>
+        <Flex justifyContent="center">
+          <Link fontSize="sm" href={ txsUrl }>View all transactions</Link>
+        </Flex>
+      </>
     );
   }
 
-  const txsUrl = link('txs');
-
   return (
     <>
       <Heading as="h4" fontSize="18px" mb={{ base: 3, lg: 8 }}>Latest transactions</Heading>
-      { /* <TxsNewItemNotice mb={{ base: 3, lg: 8 }} url={ txsUrl }>{ ({ content }) => <Box>{ content }</Box> }</TxsNewItemNotice> */ }
-      <LatestTxsNotice/>
       { content }
-      <Flex justifyContent="center">
-        <Link fontSize="sm" href={ txsUrl }>View all transactions</Link>
-      </Flex>
     </>
   );
 };

ui/home/StatsItemSkeleton.tsx

-import { Box, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 const StatsItemSkeleton = () => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Flex background={ bgColor } padding={ 5 } borderRadius="16px">
-      <Skeleton w="40px" h="40px"/>
-      <Box ml={ 4 }>
-        <Skeleton w="69px" h="10px" mb="10px"/>
-        <Skeleton w="93px" h="10px"/>
-      </Box>
+    <Flex
+      backgroundColor={ bgColor }
+      padding={ 5 }
+      borderRadius="16px"
+      flexDirection={{ base: 'row', lg: 'column', xl: 'row' }}
+      alignItems="center"
+    >
+      <Skeleton
+        w="40px"
+        h="40px"
+        mr={{ base: 4, lg: 0, xl: 4 }}
+        mb={{ base: 0, lg: 2, xl: 0 }}
+      />
+      <Flex flexDirection="column" alignItems={{ base: 'start', lg: 'center', xl: 'start' }}>
+        <Skeleton w="69px" h="10px" mt="4px" mb="8px"/>
+        <Skeleton w="93px" h="14px" mb="4px"/>
+      </Flex>
     </Flex>
   );
 };

ui/home/indicators/ChainIndicatorItem.tsx

@@ -31,7 +31,15 @@ const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats
     }
 
     if (stats.isLoading) {
-      return <Skeleton h={ 3 } w="70px" my={ 1.5 }/>;
+      return (
+        <Skeleton
+          h={ 3 }
+          w="70px"
+          my={ 1.5 }
+          // ssr: isMobile = undefined, isLoading = true
+          display={{ base: 'none', lg: 'block' }}
+        />
+      );
     }
 
     if (stats.isError) {

ui/pages/Home.tsx

@@ -16,7 +16,7 @@ const Home = () => {
         backgroundImage="radial-gradient(farthest-corner at 0 0, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%)"
         borderRadius="24px"
         padding={{ base: '24px 40px', lg: '48px' }}
-        minW="850px"
+        minW={{ base: 'unset', lg: '900px' }}
       >
         <Heading
           as="h1"

ui/shared/Page/Page.tsx

@@ -44,7 +44,7 @@ const Page = ({
   }, [ wrapChildren ]);
 
   const renderedChildren = wrapChildren ? (
-    <PageContent>{ children }</PageContent>
+    <PageContent hasSearch={ hasSearch }>{ children }</PageContent>
   ) : children;
 
   return (

ui/shared/Page/PageContent.tsx

@@ -3,16 +3,17 @@ import React from 'react';
 
 interface Props {
   children: React.ReactNode;
+  hasSearch: boolean;
 }
 
-const PageContent = ({ children }: Props) => {
+const PageContent = ({ children, hasSearch }: Props) => {
   return (
     <Box
       as="main"
       w="100%"
       paddingX={{ base: 4, lg: 12 }}
       paddingBottom={ 10 }
-      paddingTop={{ base: '138px', lg: 0 }}
+      paddingTop={{ base: hasSearch ? '138px' : '88px', lg: 0 }}
     >
       { children }
     </Box>