feat: don't show circle when loading

lifinance · May 23, 2022 · fa832a4 · fa832a4
1 parent e3c961f
commit fa832a4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx b/packages/widget/src/components/ProgressToNextUpdate/ProgressToNextUpdate.tsx
@@ -23,15 +23,20 @@ export const ProgressToNextUpdate: React.FC<
   useEffect(() => {
     const id = setInterval(() => {
       const time = calculateTime(updatedAt, timeToUpdate);
+      setValue(calculateTime(updatedAt, timeToUpdate));
       if (time >= 100) {
-        setValue(0);
         clearInterval(id);
-        return;
       }
-      setValue(calculateTime(updatedAt, timeToUpdate));
-    }, 500);
+    }, 1000);
     return () => clearInterval(id);
   }, [timeToUpdate, updatedAt]);
+
+  useEffect(() => {
+    if (isLoading) {
+      setValue(0);
+    }
+  }, [isLoading]);
+
   return (
     <Box
       sx={{

diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutes.tsx
@@ -7,21 +7,15 @@ import { useNavigate } from 'react-router-dom';
 import { useCurrentRoute, useSwapRoutes } from '../../hooks';
 import { routes } from '../../utils/routes';
 import { CardContainer, CardTitle } from '../Card';
-import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 import { SwapRouteCard } from '../SwapRouteCard';
 import { Stack } from './SwapRoutes.style';
+import { SwapRoutesUpdateProgress } from './SwapRoutesUpdateProgress';
 
 export const SwapRoutes: React.FC<BoxProps> = ({ mb }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [currentRoute] = useCurrentRoute();
-  const {
-    routes: swapRoutes,
-    isLoading,
-    isFetching,
-    dataUpdatedAt,
-    refetchTime,
-  } = useSwapRoutes();
+  const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
 
   const handleCardClick = useCallback(() => {
     navigate(routes.swapRoutes);
@@ -34,10 +28,7 @@ export const SwapRoutes: React.FC<BoxProps> = ({ mb }) => {
   return (
     <CardContainer mb={mb}>
       <CardTitle>{t('swap.routes')}</CardTitle>
-      <ProgressToNextUpdate
-        updatedAt={dataUpdatedAt}
-        timeToUpdate={refetchTime}
-        isLoading={isLoading || isFetching}
+      <SwapRoutesUpdateProgress
         sx={{
           position: 'absolute',
           top: 16,

diff --git a/packages/widget/src/components/SwapRoutes/SwapRoutesUpdateProgress.tsx b/packages/widget/src/components/SwapRoutes/SwapRoutesUpdateProgress.tsx
@@ -6,11 +6,15 @@ import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
 export const SwapRoutesUpdateProgress: React.FC<BoxProps> = (props) => {
   const { isLoading, isFetching, dataUpdatedAt, refetchTime } = useSwapRoutes();
 
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <ProgressToNextUpdate
       updatedAt={dataUpdatedAt}
       timeToUpdate={refetchTime}
-      isLoading={isLoading || isFetching}
+      isLoading={isFetching}
       {...props}
     />
   );