Add time delay before displaying the error and warning messages

oasisprotocol · Jul 7, 2023 · 49a47f5 · 49a47f5
1 parent 6bf222d
commit 49a47f5
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
@@ -20,7 +20,7 @@ import { SearchScope } from '../../../types/searchScope'
 import { textSearchMininumLength } from './search-utils'
 import Typography from '@mui/material/Typography'
 import { isValidBlockHeight } from '../../utils/helpers'
-import { isValidMnemonic } from '../../utils/helpers'
+// import { isValidMnemonic } from '../../utils/helpers'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -106,6 +106,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const [value, setValue] = useState('')
   const [isFocused, setIsFocused] = useState(false)
   const valueInSearchParams = useSearchParams()[0].get('q') ?? ''
+  const [itsTimeToAct, setItsTimeToAct] = useState(false)
 
   const wordsOfPower = t('search.wordsOfPower')
   const hasWordsOfPower = value.trim().toLowerCase().startsWith(wordsOfPower.toLowerCase())
@@ -163,6 +164,19 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
     : undefined
   const hasWarning = !!warningMessage
 
+  const hasProblem = hasError || hasWarning
+
+  useEffect(() => {
+    if (hasProblem) {
+      const timeout = setTimeout(() => {
+        setItsTimeToAct(true)
+      }, 500)
+      return () => clearTimeout(timeout)
+    } else {
+      setItsTimeToAct(false)
+    }
+  }, [hasProblem])
+
   return (
     <SearchForm
       searchVariant={variant}
@@ -172,7 +186,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
     >
       <TextField
         sx={{
-          ...(hasWarning && !hasError
+          ...(itsTimeToAct && hasWarning && !hasError
             ? {
                 [`& .${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
                   borderColor: COLORS.warningColor,
@@ -182,7 +196,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
         }}
         value={value}
         onChange={e => onChange(e.target.value)}
-        error={hasError || hasWarning}
+        error={itsTimeToAct && hasProblem}
         onFocus={() => onFocusChange(true)}
         onBlur={() => onFocusChange(false)}
         InputProps={{
@@ -198,11 +212,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
                     <HighlightOffIcon />
                   </IconButton>
                 )}
-                <SearchButton
-                  disabled={disabled || hasError || hasWarning}
-                  searchVariant={variant}
-                  type="submit"
-                >
+                <SearchButton disabled={disabled || hasProblem} searchVariant={variant} type="submit">
                   {searchButtonContent}
                 </SearchButton>
               </>
@@ -223,7 +233,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
           value &&
           value !== valueInSearchParams && (
             <>
-              {hasError && (
+              {itsTimeToAct && hasError && (
                 <>
                   <Typography
                     component="span"
@@ -244,7 +254,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
                   <br />
                 </>
               )}
-              {hasWarning && (
+              {itsTimeToAct && hasWarning && (
                 <>
                   <Typography
                     component="span"