From edbb18afa44bcfee4560ac19880a0c32563b6a0e Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 19 Apr 2024 22:55:53 +0100
Subject: Throttle gif search by 500ms (#3622)

* debounce gif search by 300ms

* Throttle it instead

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 src/components/dialogs/GifSelect.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

(limited to 'src/components/dialogs/GifSelect.tsx')

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 92e21af47..c8897da36 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useDeferredValue,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, {useCallback, useMemo, useRef, useState} from 'react'
 import {TextInput, View} from 'react-native'
 import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
@@ -22,6 +16,7 @@ import {Gif, useGifphySearch, useGiphyTrending} from '#/state/queries/giphy'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
+import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {InlineLinkText} from '#/components/Link'
@@ -82,7 +77,7 @@ function GifList({
   const {gtMobile} = useBreakpoints()
   const ref = useRef<TextInput>(null)
   const [undeferredSearch, setSearch] = useState('')
-  const search = useDeferredValue(undeferredSearch)
+  const search = useThrottledValue(undeferredSearch, 500)
 
   const isSearching = search.length > 0
 
-- 
cgit 1.4.1

