Fix query clearing delay

1 files changed, 12 insertions, 3 deletions

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 34d98977..4e6ce6a4 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -64,6 +64,7 @@ const SearchScreen: React.FC = () => {
    * Main handler for changes in query.
    */
   useEffect(() => {
+    if (!searching) return;
     if (!query.length) loadRecentSearches();
     if (query.length < 3) {
       setResults(undefined);
@@ -102,6 +103,17 @@ const SearchScreen: React.FC = () => {
     dispatch(resetScreenType(ScreenType.Search));
   });
 
+  // when searching state changes, run animation and reset query accordingly
+  useEffect(() => {
+    if (searching) {
+      timing(top, topInConfig).start(() => setResults(undefined));
+    } else {
+      setQuery('');
+      handleBlur();
+      timing(top, topOutConfig).start();
+    }
+  }, [searching]);
+
   const loadRecentlySearchedUsers = async () => {
     try {
       const asyncCache = await AsyncStorage.getItem('@recently_searched_users');
@@ -148,15 +160,12 @@ const SearchScreen: React.FC = () => {
     easing: Easing.inOut(Easing.ease),
   };
   const handleFocus = () => {
-    timing(top, topInConfig).start();
     setSearching(true);
   };
   const handleBlur = () => {
     Keyboard.dismiss();
   };
   const handleCancel = () => {
-    handleBlur();
-    timing(top, topOutConfig).start(() => setQuery(''));
     setSearching(false);
   };