homepage chart fixes

ui/home/indicators/ChainIndicatorChartContainer.tsx

-import { Flex, Spinner } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
 import type { ChainIndicatorChartData } from './types';
 
+import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import ChainIndicatorChart from './ChainIndicatorChart';
@@ -14,7 +15,7 @@ const ChainIndicatorChartContainer = ({ data, isError, isLoading }: Props) => {
 
   const content = (() => {
     if (isLoading) {
-      return <Spinner size="md" m="auto"/>;
+      return <ContentLoader mt="auto"/>;
     }
 
     if (isError) {

ui/home/indicators/ChainIndicatorItem.tsx

@@ -18,7 +18,7 @@ interface Props {
 }
 
 const ChainIndicatorItem = ({ id, title, value, icon, isSelected, onClick, stats }: Props) => {
-  const bgColor = useColorModeValue('white', 'gray.900');
+  const bgColor = useColorModeValue('white', 'black');
   const isMobile = useIsMobile();
 
   const handleClick = React.useCallback(() => {

ui/home/indicators/ChainIndicators.tsx

@@ -40,8 +40,8 @@ const ChainIndicators = () => {
     () => fetch('/node-api/stats'),
   );
 
-  const bgColor = useColorModeValue('white', 'gray.900');
-  const listBgColor = useColorModeValue('gray.50', 'black');
+  const bgColor = useColorModeValue('white', 'black');
+  const listBgColor = useColorModeValue('gray.50', 'gray.900');
 
   if (indicators.length === 0) {
     return null;
@@ -91,7 +91,16 @@ const ChainIndicators = () => {
         <ChainIndicatorChartContainer { ...queryResult }/>
       </Flex>
       { indicators.length > 1 && (
-        <Flex flexShrink={ 0 } flexDir="column" as="ul" p={ 3 } borderRadius="lg" bgColor={ listBgColor } rowGap={ 3 } order={{ base: 1, lg: 2 }}>
+        <Flex
+          flexShrink={ 0 }
+          flexDir="column"
+          as="ul"
+          p={ 3 }
+          borderRadius="lg"
+          bgColor={ listBgColor }
+          rowGap={ 3 }
+          order={{ base: 1, lg: 2 }}
+        >
           { indicators.map((indicator) => (
             <ChainIndicatorItem
               key={ indicator.id }

ui/shared/ContentLoader.tsx

-import { Box, Text } from '@chakra-ui/react';
+import { Box, Text, chakra } from '@chakra-ui/react';
 import { keyframes } from '@chakra-ui/system';
 import React from 'react';
 
@@ -7,9 +7,13 @@ const runnerAnimation = keyframes`
     100% { left: '100%'; transform: translateX(-99%); }
 `;
 
-const ContentLoader = () => {
+interface Props {
+  className?: string;
+}
+
+const ContentLoader = ({ className }: Props) => {
   return (
-    <Box display="inline-block">
+    <Box display="inline-block" className={ className }>
       <Box
         width="100%"
         height="6px"
@@ -31,4 +35,4 @@ const ContentLoader = () => {
   );
 };
 
-export default ContentLoader;
+export default chakra(ContentLoader);