From a9ea58121a3a9671710f61314109e45d0e434960 Mon Sep 17 00:00:00 2001
From: isstuev <isstuev@gmail.com>
Date: Tue, 15 Oct 2024 16:52:03 +0300
Subject: [PATCH] Blocks validated skeleton displays placeholder values

---
 .../blocksValidated/AddressBlocksValidatedListItem.tsx | 10 +++++++---
 .../AddressBlocksValidatedTableItem.tsx                |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
index 1ec811a683..70f35d8ebc 100644
--- a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton } from '@chakra-ui/react';
+import { Text, Flex, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -45,7 +45,9 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Gas used</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading }>
+          <Text color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Text>
+        </Skeleton>
         <BlockGasUsed
           gasUsed={ props.gas_used }
           gasLimit={ props.gas_limit }
@@ -55,7 +57,9 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { currencyUnits.ether }</Skeleton>
-          <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ totalReward.toFixed() }</Skeleton>
+          <Skeleton isLoaded={ !props.isLoading }>
+            <Text color="text_secondary">{ totalReward.toFixed() }</Text>
+          </Skeleton>
         </Flex>
       ) }
     </ListItemMobile>
diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
index 9ee38b297e..e4bce7e860 100644
--- a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
+++ b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
@@ -57,7 +57,7 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         </Flex>
       </Td>
       { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled && (
-        <Td isNumeric display="flex" justifyContent="end">
+        <Td isNumeric>
           <Skeleton isLoaded={ !props.isLoading } display="inline-block">
             <span>{ totalReward.toFixed() }</span>
           </Skeleton>