skeletons for stats counters

stubs/stats.ts

-import type { HomeStats, StatsChartsSection } from 'types/api/stats';
+import type { Counter, HomeStats, StatsChartsSection } from 'types/api/stats';
 
 export const HOMEPAGE_STATS: HomeStats = {
   average_block_time: 14346,
@@ -53,3 +53,10 @@ export const STATS_CHARTS_SECTION: StatsChartsSection = {
 export const STATS_CHARTS = {
   sections: [ STATS_CHARTS_SECTION ],
 };
+
+export const STATS_COUNTER: Counter = {
+  id: 'stub',
+  value: '9074405',
+  title: 'Placeholder Counter',
+  units: '',
+};

types/api/stats.ts

@@ -23,7 +23,7 @@ export type Counters = {
   counters: Array<Counter>;
 }
 
-type Counter = {
+export type Counter = {
   id: string;
   value: string;
   title: string;

ui/stats/NumberWidget.tsx

-import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
   label: string;
   value: string;
+  isLoading?: boolean;
 }
 
-const NumberWidget = ({ label, value }: Props) => {
+const NumberWidget = ({ label, value, isLoading }: Props) => {
+  const bgColor = useColorModeValue('blue.50', 'blue.800');
+  const skeletonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+
   return (
     <Box
-      bg={ useColorModeValue('blue.50', 'blue.800') }
+      bg={ isLoading ? skeletonBgColor : bgColor }
       px={ 3 }
       py={{ base: 2, lg: 3 }}
       borderRadius={ 12 }
     >
-      <Text
-        variant="secondary"
+      <Skeleton
+        isLoaded={ !isLoading }
+        color="text_secondary"
         fontSize="xs"
+        w="fit-content"
       >
-        { label }
-      </Text>
+        <span>{ label }</span>
+      </Skeleton>
 
-      <Text
+      <Skeleton
+        isLoaded={ !isLoading }
         fontWeight={ 500 }
         fontSize="lg"
+        w="fit-content"
       >
         { value }
-      </Text>
+      </Skeleton>
     </Box>
   );
 };

ui/stats/NumberWidgetSkeleton.tsx

-import { Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-const NumberWidgetSkeleton = () => {
-  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
-
-  return (
-    <Box
-      backgroundColor={ bgColor }
-      p={ 3 }
-      borderRadius={ 12 }
-    >
-      <Skeleton w="70px" h="10px" mb={ 2 }/>
-
-      <Skeleton w="100px" h="27px"/>
-    </Box>
-  );
-};
-
-export default NumberWidgetSkeleton;

ui/stats/NumberWidgetsList.tsx

@@ -2,18 +2,17 @@ import { Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { STATS_COUNTER } from 'stubs/stats';
 
 import DataFetchAlert from '../shared/DataFetchAlert';
 import NumberWidget from './NumberWidget';
-import NumberWidgetSkeleton from './NumberWidgetSkeleton';
-
-const skeletonsCount = 8;
 
 const NumberWidgetsList = () => {
-  const { data, isLoading, isError } = useApiQuery('stats_counters');
-
-  const skeletonElement = [ ...Array(skeletonsCount) ]
-    .map((e, i) => <NumberWidgetSkeleton key={ i }/>);
+  const { data, isPlaceholderData, isError } = useApiQuery('stats_counters', {
+    queryOptions: {
+      placeholderData: { counters: Array(10).fill(STATS_COUNTER) },
+    },
+  });
 
   if (isError) {
     return <DataFetchAlert/>;
@@ -24,17 +23,19 @@ const NumberWidgetsList = () => {
       gridTemplateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
       gridGap={ 4 }
     >
-      { isLoading ? skeletonElement :
-        data?.counters?.map(({ id, title, value, units }) => {
+      {
+        data?.counters?.map(({ id, title, value, units }, index) => {
 
           return (
             <NumberWidget
-              key={ id }
+              key={ id + (isPlaceholderData ? index : '') }
               label={ title }
               value={ `${ Number(value).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }) } ${ units ? units : '' }` }
+              isLoading={ isPlaceholderData }
             />
           );
-        }) }
+        })
+      }
     </Grid>
   );
 };