loader animation for quote refresh

synapsecns · Sep 12, 2024 · 5623a0d · 5623a0d
1 parent 1c5414f
commit 5623a0d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/synapse-interface/components/StateManagedBridge/BridgeQuoteResetTimer.tsx b/packages/synapse-interface/components/StateManagedBridge/BridgeQuoteResetTimer.tsx
@@ -5,28 +5,55 @@ import { convertMsToSeconds } from '@/utils/time'
 
 export const BridgeQuoteResetTimer = ({
   bridgeQuote,
+  isLoading,
   isActive,
   duration, // in ms
 }: {
   bridgeQuote: BridgeQuote
+  isLoading: boolean
   isActive: boolean
   duration: number
 }) => {
   const memoizedTimer = useMemo(() => {
-    if (isActive) {
+    if (!isActive) return null
+
+    if (isLoading) {
+      return <AnimatedLoadingCircle />
+    } else {
       return (
         <AnimatedProgressCircle
           animateKey={bridgeQuote.id}
           duration={duration}
         />
       )
     }
-    return null
   }, [bridgeQuote, duration, isActive])
 
   return memoizedTimer
 }
 
+const AnimatedLoadingCircle = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="-12 -12 24 24"
+      stroke="currentcolor"
+      fill="none"
+      className="absolute block -rotate-90"
+    >
+      <circle r="8" pathLength="1" stroke-dashArray="0.05" stroke-opacity=".5">
+        <animate
+          attributeName="stroke-dashoffset"
+          to="-1"
+          dur="2.5s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
+  )
+}
+
 const AnimatedProgressCircle = ({
   animateKey,
   duration,

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -225,7 +225,7 @@ const StateManagedBridge = () => {
     hasValidQuote &&
     hasSufficientBalance &&
     isApproved &&
-    !isLoading &&
+    // !isLoading &&
     !isBridgePaused &&
     !isWalletPending
 
@@ -499,6 +499,7 @@ const StateManagedBridge = () => {
                 <div className="absolute flex items-center !right-10">
                   <BridgeQuoteResetTimer
                     bridgeQuote={bridgeQuote}
+                    isLoading={isLoading}
                     isActive={isUpdaterEnabled}
                     duration={quoteTimeout}
                   />