Debounce input (#123)

package.json

@@ -25,6 +25,7 @@
     "@polkadot/extension-inject": "^0.43.1",
     "@polkadot/react-identicon": "^2.0.1",
     "@polkadot/react-qr": "^2.0.1",
+    "lodash.debounce": "^4.0.8",
     "nanostores": "^0.5.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -39,6 +40,7 @@
     "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@types/chrome": "^0.0.181",
     "@types/firefox-webext-browser": "^94.0.1",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@typescript-eslint/eslint-plugin": "^5.20.0",

src/ui/components/Address.tsx

@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react'
 import { AccountJson } from '@polkadot/extension-base/background/types'
 import Identicon from '@polkadot/react-identicon'
 import { IconTheme } from '@polkadot/react-identicon/types'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useMetadata } from '../../hooks/useMetadata'
 import { editAccount } from '../../messaging/uiActions'
 import { accountsStore } from '../../stores/accounts'
@@ -33,8 +33,10 @@ export const Address: React.FC<Props> = ({ address, genesisHash, name }) => {
   const chainLabel = ` · ${chain?.definition.chain.replace(RELAY_CHAIN, '')}`
   const hashLabel = cropHash(recoded.formatted || address || UNKNOWN)
 
-  const changeName = (v: string) =>
-    address && editAccount(address, v).catch(console.error)
+  const changeName = useCallback(
+    (v: string) => address && editAccount(address, v).catch(console.error),
+    [address]
+  )
 
   useEffect(() => {
     if (!address) return

src/ui/components/AutosizeInput.tsx

-import React from 'react'
+import React, { useCallback } from 'react'
+import debounce from 'lodash.debounce'
 
 type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   onChange: (value: string) => void
@@ -15,6 +16,11 @@ export const AutosizeInput: React.FC<Props> = ({
   const span = React.useRef<HTMLSpanElement>(null)
   const isContentChangedRef = React.useRef(false)
 
+  const debouncedOnChange = useCallback(
+    debounce((v: string) => onChange(v), 100),
+    [onChange]
+  )
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!isContentChangedRef.current) isContentChangedRef.current = true
     setContent(e.currentTarget.value)
@@ -27,7 +33,7 @@ export const AutosizeInput: React.FC<Props> = ({
 
   React.useEffect(() => {
     setWidth(span.current?.offsetWidth || 0)
-    if (isContentChangedRef.current) onChange(content)
+    if (isContentChangedRef.current) debouncedOnChange(content)
   }, [content])
 
   return (

yarn.lock

@@ -1853,6 +1853,18 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/lodash.debounce@^4.0.7":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
+  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/minimatch@^3.0.3":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"