countdown refresh records (#503)

helix-bridge · Aug 10, 2023 · dbd23a6 · dbd23a6
1 parent 7b3892f
commit dbd23a6
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 7 deletions.
diff --git a/packages/apps/components/history/History.tsx b/packages/apps/components/history/History.tsx
@@ -1,4 +1,4 @@
-import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import { Badge, Button, Input, message, Table, Tabs } from 'antd';
 import { ColumnType } from 'antd/lib/table';
 import { format } from 'date-fns';
@@ -7,7 +7,7 @@ import { useQuery } from 'graphql-hooks';
 import last from 'lodash/last';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Icon } from 'shared/components/widget/Icon';
 import { Logo } from 'shared/components/widget/Logo';
 import { DATE_TIME_FORMAT, RecordStatus } from 'shared/config/constant';
@@ -17,6 +17,7 @@ import { convertToDvm, revertAccount } from 'shared/utils/helper/address';
 import { gqlName, toMiddleSplitNaming } from 'shared/utils/helper/common';
 import { updateStorage } from 'shared/utils/helper/storage';
 import { isSS58Address, isValidAddress } from 'shared/utils/helper/validator';
+import { CountdownRefresh } from 'components/widget/CountdownRefresh';
 import { Path } from '../../config';
 import { HISTORY_RECORDS } from '../../config/gql';
 import { useITranslation } from '../../hooks';
@@ -76,6 +77,7 @@ const toSearchableAccount = (account: string | undefined) => {
 };
 
 export default function History() {
+  const countdownRefreshRef = useRef<SVGSVGElement>(null);
   const { t } = useITranslation();
   const { disconnect } = useApi();
   const router = useRouter();
@@ -241,6 +243,11 @@ export default function History() {
     },
   ];
 
+  const handleRefresh = useCallback(() => {
+    countdownRefreshRef.current?.dispatchEvent(new Event('click'));
+    refetch({ ...paginator, sender: searchAccount, recipient: searchAccount });
+  }, [paginator, searchAccount, refetch]);
+
   return (
     <>
       <div className="mt-2 lg:mt-4 pb-2 lg:pb-4 flex justify-between items-end">
@@ -282,14 +289,12 @@ export default function History() {
 
         <Button
           type="link"
-          onClick={() => {
-            refetch({ ...paginator, sender: searchAccount, recipient: searchAccount });
-          }}
+          onClick={handleRefresh}
           disabled={loading}
           className="flex items-center cursor-pointer px-0"
         >
-          <span className="mr-2">{t('Latest transactions')}</span>
-          <SyncOutlined />
+          <span>{t('Latest transactions')}</span>
+          <CountdownRefresh ref={countdownRefreshRef} isActive={!loading} onIteration={handleRefresh} />
         </Button>
       </div>
 

diff --git a/packages/apps/components/widget/CountdownRefresh.tsx b/packages/apps/components/widget/CountdownRefresh.tsx
@@ -0,0 +1,96 @@
+import { forwardRef, useEffect, useRef } from 'react';
+
+export const CountdownRefresh = forwardRef<SVGSVGElement, { isActive?: boolean; onIteration?: () => void }>(
+  function RefreshIcon({ isActive, onIteration }, ref) {
+    const circleRef = useRef<SVGCircleElement>(null);
+
+    useEffect(() => {
+      if (isActive && !circleRef.current?.classList.contains('refresh-countdown')) {
+        circleRef.current?.classList.add('refresh-countdown');
+      } else {
+        circleRef.current?.getAnimations().at(0)?.cancel();
+        circleRef.current?.classList.remove('refresh-countdown');
+      }
+    }, [isActive]);
+
+    return (
+      <svg
+        ref={ref}
+        id="countdown_refresh"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="-6 -6 36 36"
+        width="36"
+        height="36"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+      >
+        {/* background */}
+        <path
+          stroke="none"
+          fill="none"
+          className="fill-white/30"
+          d="M16.2751 7.78995C13.932 5.44681 10.133 5.44681 7.78986 7.78995C7.02853 8.55128 6.51457 9.4663 6.24798 10.4351C6.24473 10.4499 6.24114 10.4646 6.23719 10.4793C6.17635 10.7064 6.12938 10.9339 6.09577 11.161C5.83159 12.9457 6.39255 14.7026 7.52624 15.9944C7.61054 16.0901 7.69842 16.1838 7.78986 16.2752C8.08307 16.5685 8.39909 16.825 8.7322 17.0448C9.25533 17.3892 9.84172 17.6568 10.4798 17.8278C10.7386 17.8971 10.9979 17.9484 11.2565 17.9825C12.9537 18.2061 14.6187 17.6866 15.8747 16.6415C16.0123 16.5265 16.1459 16.4044 16.2751 16.2752C16.2848 16.2655 16.2947 16.2561 16.3047 16.2469C17.0123 15.531 17.5491 14.627 17.8283 13.5851C17.9712 13.0517 18.5196 12.7351 19.053 12.878C19.5865 13.021 19.9031 13.5693 19.7602 14.1028C19.3141 15.7676 18.3745 17.1684 17.1409 18.1899C16.1883 18.9822 15.0949 19.5189 13.9515 19.8002C11.8607 20.3147 9.6028 19.9749 7.7328 18.7809C7.06855 18.3579 6.47841 17.8432 5.97519 17.2589C5.12341 16.2738 4.55173 15.1302 4.26015 13.9324C4.01698 12.9416 3.96104 11.8931 4.12168 10.8379C4.36697 9.20484 5.1183 7.63309 6.37564 6.37574C9.49984 3.25154 14.5652 3.25154 17.6894 6.37574L18.2332 6.91959L18.2337 5.49951C18.2338 5.05769 18.5921 4.69964 19.034 4.69979C19.4758 4.69995 19.8338 5.05825 19.8337 5.50007L19.8325 9.03277L19.8322 9.8325L19.0325 9.83249L18.9401 9.83249C18.8146 9.85665 18.6854 9.85665 18.5599 9.83248L15.5005 9.83245C15.0587 9.83245 14.7005 9.47427 14.7005 9.03244C14.7005 8.59062 15.0587 8.23245 15.5005 8.23245L16.7176 8.23246L16.2751 7.78995Z"
+        />
+        <defs>
+          <path
+            id="refresh"
+            stroke="none"
+            fill="none"
+            d="M16.2751 7.78995C13.932 5.44681 10.133 5.44681 7.78986 7.78995C7.02853 8.55128 6.51457 9.4663 6.24798 10.4351C6.24473 10.4499 6.24114 10.4646 6.23719 10.4793C6.17635 10.7064 6.12938 10.9339 6.09577 11.161C5.83159 12.9457 6.39255 14.7026 7.52624 15.9944C7.61054 16.0901 7.69842 16.1838 7.78986 16.2752C8.08307 16.5685 8.39909 16.825 8.7322 17.0448C9.25533 17.3892 9.84172 17.6568 10.4798 17.8278C10.7386 17.8971 10.9979 17.9484 11.2565 17.9825C12.9537 18.2061 14.6187 17.6866 15.8747 16.6415C16.0123 16.5265 16.1459 16.4044 16.2751 16.2752C16.2848 16.2655 16.2947 16.2561 16.3047 16.2469C17.0123 15.531 17.5491 14.627 17.8283 13.5851C17.9712 13.0517 18.5196 12.7351 19.053 12.878C19.5865 13.021 19.9031 13.5693 19.7602 14.1028C19.3141 15.7676 18.3745 17.1684 17.1409 18.1899C16.1883 18.9822 15.0949 19.5189 13.9515 19.8002C11.8607 20.3147 9.6028 19.9749 7.7328 18.7809C7.06855 18.3579 6.47841 17.8432 5.97519 17.2589C5.12341 16.2738 4.55173 15.1302 4.26015 13.9324C4.01698 12.9416 3.96104 11.8931 4.12168 10.8379C4.36697 9.20484 5.1183 7.63309 6.37564 6.37574C9.49984 3.25154 14.5652 3.25154 17.6894 6.37574L18.2332 6.91959L18.2337 5.49951C18.2338 5.05769 18.5921 4.69964 19.034 4.69979C19.4758 4.69995 19.8338 5.05825 19.8337 5.50007L19.8325 9.03277L19.8322 9.8325L19.0325 9.83249L18.9401 9.83249C18.8146 9.85665 18.6854 9.85665 18.5599 9.83248L15.5005 9.83245C15.0587 9.83245 14.7005 9.47427 14.7005 9.03244C14.7005 8.59062 15.0587 8.23245 15.5005 8.23245L16.7176 8.23246L16.2751 7.78995Z"
+          />
+          <clipPath id="refresh-clip">
+            <use xlinkHref="#refresh" />
+          </clipPath>
+        </defs>
+        <g clipPath="url(#refresh-clip)">
+          <circle
+            ref={circleRef}
+            cx="12"
+            cy="12"
+            r="5"
+            transform="rotate(365,12,12)"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="16"
+            strokeDasharray="30"
+            strokeDashoffset="0"
+            onAnimationIteration={onIteration}
+          />
+        </g>
+        <use xlinkHref="#refresh" />
+        <animateTransform
+          id="transform_0"
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 0 0"
+          to="-10 0 0"
+          dur="0.07s"
+          begin="countdown_refresh.click;"
+          repeatCount="1"
+        />
+        <animateTransform
+          id="transform_1"
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="-45 0 0"
+          to="390 0 0"
+          dur="0.6s"
+          begin="transform_0.end"
+          repeatCount="1"
+        />
+        <animateTransform
+          id="transform_2"
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="390 0 0"
+          to="360 0 0"
+          dur="0.15s"
+          begin="transform_1.end"
+          repeatCount="1"
+        />
+      </svg>
+    );
+  }
+);
diff --git a/packages/apps/styles/index.scss b/packages/apps/styles/index.scss
@@ -199,6 +199,21 @@ body {
   }
 }
 
+.refresh-countdown {
+  animation: countdown-dash 9.3s linear infinite;
+  animation-delay: 0.7s;
+}
+
+@keyframes countdown-dash {
+  from {
+    stroke-dashoffset: 0;
+  }
+
+  to {
+    stroke-dashoffset: -30;
+  }
+}
+
 @import './loading.scss';
 @import './reset.scss';
 @import './modal.scss';