lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2336 from blockscout/fe-2335

Browse Source 
add skeleton to chart resolutions control
This commit is contained in:
Igor Stuev
2024-10-29 12:10:47 +01:00
committed by GitHub
parent 98547e38db ccd6dd0ab3
commit e6a48a7173
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/pages/Chart.tsx
+9 -3
View File
@@ -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>
) }