fix: prevent usd values flashing when input changes

Signed-off-by: Griko Nibras <[email protected]>
skip-mev · Nov 23, 2023 · 3b9e0cf · 3b9e0cf
1 parent a22908f
commit 3b9e0cf
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/components/UsdValue.tsx b/src/components/UsdValue.tsx
@@ -15,6 +15,13 @@ export const UsdValue = ({
 }: UsdValueProps) => {
   const { data: usdValue = 0, isLoading } = useUsdValue(args);
 
+  const prevValue = useRef(usdValue);
+  useEffect(() => {
+    if (!isLoading && prevValue.current !== usdValue) {
+      prevValue.current = usdValue;
+    }
+  }, [isLoading, usdValue]);
+
   const contextStore = useContext(ctx);
   useEffect(() => {
     if (contextStore && context) {
@@ -25,6 +32,9 @@ export const UsdValue = ({
     }
   });
 
+  if (isLoading && prevValue.current) {
+    return <>{`$${prevValue.current.toFixed(2)}`}</>;
+  }
   return <>{isLoading ? loading : `$${usdValue.toFixed(2)}`}</>;
 };