Merge pull request #2336 from blockscout/fe-2335

add skeleton to chart resolutions control
blockscout · Oct 29, 2024 · 6a2203c · 6a2203c
2 parents 5231d04 + 85f6dbf
commit 6a2203c
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Link, Text } from '@chakra-ui/react';
+import { Button, Flex, Link, Skeleton, Text } from '@chakra-ui/react';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -179,13 +179,19 @@ const Chart = () => {
             { !isMobile && <Text>Period</Text> }
             <ChartIntervalSelect interval={ interval } onIntervalChange={ onIntervalChange }/>
           </Flex>
-          { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 1 && (
+          { (
+            (info?.resolutions && info?.resolutions.length > 1) ||
+            (!info && lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 1)
+          ) && (
             <Flex alignItems="center" gap={ 3 }>
-              <Text>{ isMobile ? 'Res.' : 'Resolution' }</Text>
+              <Skeleton isLoaded={ !isInfoLoading }>
+                { isMobile ? 'Res.' : 'Resolution' }
+              </Skeleton>
               <ChartResolutionSelect
                 resolution={ resolution }
                 onResolutionChange={ onResolutionChange }
                 resolutions={ lineQuery.data?.info?.resolutions || [] }
+                isLoading={ isInfoLoading }
               />
             </Flex>
           ) }