enhance network menu skeleton

blockscout · May 31, 2023 · 0526882 · 0526882
1 parent ebb7808
commit 0526882
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx
@@ -1,4 +1,4 @@
-import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex } from '@chakra-ui/react';
+import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, Skeleton, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork, NetworkGroup } from 'types/networks';
@@ -13,12 +13,15 @@ interface Props {
 const NetworkMenuPopup = ({ items, tabs }: Props) => {
   const selectedNetwork = items?.find(({ isActive }) => isActive);
   const selectedTab = tabs.findIndex((tab) => selectedNetwork?.group === tab);
+  const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   const content = !items || items.length === 0 ? (
     <>
       <Skeleton h="30px" w="120px"/>
       <Flex mt={ 4 } alignItems="center">
-        <Skeleton h="40px" w="105px"/>
+        <Flex h="40px" w="105px" bgColor={ bgColor } borderRadius="base" px={ 4 } py={ 2 }>
+          <Skeleton h="24px" w="100%"/>
+        </Flex>
         <Skeleton h="24px" w="68px" mx={ 4 }/>
         <Skeleton h="24px" w="45px" mx={ 4 }/>
       </Flex>