Merge pull request #615 from DeXter-on-Radix/debounce-slider

Debounce slider
DeXter-on-Radix · Nov 28, 2024 · 93f0f6d · 93f0f6d
2 parents 4c6e29d + a22b9cb
commit 93f0f6d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "3.3.2",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.37.1",

diff --git a/src/app/components/OrderInput.tsx b/src/app/components/OrderInput.tsx
@@ -31,6 +31,7 @@ import {
 } from "state/orderInputSlice";
 import { Calculator } from "services/Calculator";
 import { DexterToast } from "components/DexterToaster";
+import { useDebouncedCallback } from "use-debounce";
 
 // XRD reserved for transaction fees
 const XRD_FEE_ALLOWANCE = 3;
@@ -468,47 +469,51 @@ function UserInputContainer() {
   const isBuyOrder = side === "BUY";
   const isSellOrder = side === "SELL";
 
-  const sliderCallback = useCallback(
-    (newPercentage: number) => {
-      const isXRDToken = isBuyOrder
-        ? token2.symbol === "XRD"
-        : token1.symbol === "XRD";
-      let balance = isBuyOrder ? balanceToken2 : balanceToken1;
-
-      if (newPercentage === 100 && isXRDToken) {
-        balance = Math.max(balance - XRD_FEE_ALLOWANCE, 0);
-      }
+  const sliderDebounceMs = 350;
+  const sliderCallback = useDebouncedCallback(
+    useCallback(
+      (newPercentage: number) => {
+        const isXRDToken = isBuyOrder
+          ? token2.symbol === "XRD"
+          : token1.symbol === "XRD";
+        let balance = isBuyOrder ? balanceToken2 : balanceToken1;
+
+        if (newPercentage === 100 && isXRDToken) {
+          balance = Math.max(balance - XRD_FEE_ALLOWANCE, 0);
+        }
 
-      const amount = Calculator.divide(
-        Calculator.multiply(balance, newPercentage),
-        100
-      );
+        const amount = Calculator.divide(
+          Calculator.multiply(balance, newPercentage),
+          100
+        );
 
-      const specifiedToken = isBuyOrder
-        ? SpecifiedToken.TOKEN_2
-        : SpecifiedToken.TOKEN_1;
-
-      dispatch(
-        orderInputSlice.actions.setTokenAmount({
-          amount,
-          bestBuy,
-          bestSell,
-          balanceToken1,
-          balanceToken2,
-          specifiedToken,
-        })
-      );
-    },
-    [
-      isBuyOrder,
-      token1.symbol,
-      token2.symbol,
-      balanceToken1,
-      balanceToken2,
-      bestBuy,
-      bestSell,
-      dispatch,
-    ]
+        const specifiedToken = isBuyOrder
+          ? SpecifiedToken.TOKEN_2
+          : SpecifiedToken.TOKEN_1;
+
+        dispatch(
+          orderInputSlice.actions.setTokenAmount({
+            amount,
+            bestBuy,
+            bestSell,
+            balanceToken1,
+            balanceToken2,
+            specifiedToken,
+          })
+        );
+      },
+      [
+        isBuyOrder,
+        token1.symbol,
+        token2.symbol,
+        balanceToken1,
+        balanceToken2,
+        bestBuy,
+        bestSell,
+        dispatch,
+      ]
+    ),
+    sliderDebounceMs
   );
 
   useEffect(() => {