From 7be6eb5d7ffa1574820c278b8394c1ea4dda7fc4 Mon Sep 17 00:00:00 2001
From: Nikita MIkhailov <mikhaylovnv.dev@gmail.com>
Date: Sun, 2 Feb 2025 19:07:54 +0100
Subject: [PATCH] chore(Pool/Positions/create): add debounce for mutating price
 range globally for page.

---
 .../Positions/create/RangeSelectionStep.tsx   | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/pages/Pool/Positions/create/RangeSelectionStep.tsx b/apps/web/src/pages/Pool/Positions/create/RangeSelectionStep.tsx
index 48e5a2078cf..f6c96fdd1fa 100644
--- a/apps/web/src/pages/Pool/Positions/create/RangeSelectionStep.tsx
+++ b/apps/web/src/pages/Pool/Positions/create/RangeSelectionStep.tsx
@@ -8,7 +8,7 @@ import { useCreatePositionContext, usePriceRangeContext } from 'pages/Pool/Posit
 import { PoolOutOfSyncError } from 'pages/Pool/Positions/create/PoolOutOfSyncError'
 import { Container } from 'pages/Pool/Positions/create/shared'
 import { getInvertedTuple } from 'pages/Pool/Positions/create/utils'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { Minus, Plus } from 'react-feather'
 import { Trans, useTranslation } from 'react-i18next'
 import { useRangeHopCallbacks } from 'state/mint/v3/hooks'
@@ -184,16 +184,31 @@ function RangeInput({
   const [baseCurrency, quoteCurrency] = getInvertedTuple(derivedPositionInfo.currencies, priceInverted)
   const [displayUserTypedValue, setDisplayUserTypedValue] = useState(false)
 
-  const handlePriceRangeInput = useCallback(
-    (input: RangeSelectionInput, value: string) => {
-      if (input === RangeSelectionInput.MIN) {
-        setPriceRangeState((prev) => ({ ...prev, minPrice: value, fullRange: false }))
-      } else {
-        setPriceRangeState((prev) => ({ ...prev, maxPrice: value, fullRange: false }))
-      }
+  const handleTimer = useRef<NodeJS.Timer>()
+  const debounceTimer = 350
 
+  const handlePriceRangeInput = useCallback(
+    (input: RangeSelectionInput, value: string, debounce = false) => {
       setTypedValue(value)
       setDisplayUserTypedValue(true)
+      const mutateContext = () => {
+        if (input === RangeSelectionInput.MIN) {
+          setPriceRangeState((prev) => ({ ...prev, minPrice: value, fullRange: false }))
+        } else {
+          setPriceRangeState((prev) => ({ ...prev, maxPrice: value, fullRange: false }))
+        }
+      }
+
+      if (!debounce) {
+        mutateContext()
+
+        return
+      }
+
+      handleTimer.current && clearTimeout(handleTimer.current)
+      handleTimer.current = setTimeout(() => {
+        mutateContext()
+      }, debounceTimer)
     },
     [setPriceRangeState],
   )
@@ -239,7 +254,7 @@ function RangeInput({
           px="$none"
           py="$none"
           value={displayUserTypedValue ? typedValue : value}
-          onChangeText={(text) => handlePriceRangeInput(input, text)}
+          onChangeText={(text) => handlePriceRangeInput(input, text, true)}
           onBlur={() => setDisplayUserTypedValue(false)}
           inputEnforcer={numericInputEnforcerWithInfinity}
           $md={{