From fabe8b229fd5a7f10bb53490241a6496c576ec56 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Fri, 27 Oct 2023 03:09:30 +0200
Subject: [PATCH] Use debounce instead of onBlur to update image fees info

---
 components/form.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/form.js b/components/form.js
index 9878d6d54b..75f9808e71 100644
--- a/components/form.js
+++ b/components/form.js
@@ -246,6 +246,12 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
     setDragStyle(null)
   }, [setDragStyle])
 
+  useEffect(debounce(() => {
+    const text = innerRef?.current.value
+    const s3Keys = text ? [...text.matchAll(AWS_S3_URL_REGEXP)].map(m => Number(m[1])) : []
+    updateImageFeesInfo({ variables: { s3Keys } })
+  }, 1000), [innerRef?.current?.value])
+
   return (
     <FormGroup label={label} className={groupClassName}>
       <div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
@@ -301,12 +307,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
               {...props}
               onChange={onChangeInner}
               onKeyDown={onKeyDownInner(userSuggestOnKeyDown)}
-              onBlur={() => {
-                const text = innerRef?.current.value
-                const s3Keys = text ? [...text.matchAll(AWS_S3_URL_REGEXP)].map(m => Number(m[1])) : []
-                updateImageFeesInfo({ variables: { s3Keys } })
-                setTimeout(resetSuggestions, 100)
-              }}
+              onBlur={() => setTimeout(resetSuggestions, 100)}
               onDragEnter={onDragEnter}
               onDragLeave={onDragLeave}
               onDrop={onDrop}