From 85f6dbff359c1cc7a7583d7f65c5d3e3af2046d0 Mon Sep 17 00:00:00 2001
From: isstuev <isstuev@gmail.com>
Date: Tue, 29 Oct 2024 11:52:45 +0100
Subject: [PATCH] add skeleton to chart resolutions control

---
 ui/pages/Chart.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx
index 684db47170..64385399b3 100644
--- 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>
           ) }