improve progress circle

ui/shared/GasInfoTooltipContent/GasInfoTooltipContent.tsx

@@ -27,7 +27,7 @@ const GasInfoTooltipContent = ({ data, dataUpdatedAt }: Props) => {
           <GridItem color="text_secondary" display="flex" justifyContent="flex-end" columnGap={ 2 }>
             { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
             { data.gas_prices_update_in !== 0 &&
-              <GasInfoUpdateTimer startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
+              <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
           </GridItem>
         </>
       ) }

ui/shared/GasInfoTooltipContent/GasInfoUpdateTimer.tsx

 import { CircularProgress } from '@chakra-ui/react';
 import React from 'react';
 
-import { SECOND } from 'lib/consts';
 import dayjs from 'lib/date/dayjs';
 
 interface Props {
@@ -14,8 +13,8 @@ const getValue = (startDate: dayjs.Dayjs, duration: number) => {
   const diff = now.diff(startDate, 'ms');
   const value = diff / duration * 100;
 
-  if (value >= 95) {
-    return 95;
+  if (value >= 99) {
+    return 99;
   }
 
   return value;
@@ -30,10 +29,10 @@ const GasInfoUpdateTimer = ({ startTime, duration }: Props) => {
     const intervalId = window.setInterval(() => {
       const nextValue = getValue(startDate, duration);
       setValue(nextValue);
-      if (nextValue === 95) {
+      if (nextValue === 99) {
         window.clearInterval(intervalId);
       }
-    }, SECOND);
+    }, 100);
 
     return () => {
       window.clearInterval(intervalId);