Add Loading Effect for Search Queries

kaamil-ahamadh · Nov 18, 2022 · 9f44ed4 · 9f44ed4
1 parent a59af32
commit 9f44ed4
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/App.js b/src/App.js
@@ -47,12 +47,15 @@ function App() {
 
   const handleSearchApi = async (userSearch) => {
     try {
+      setLoading(true);
       const response = await youtubeApiSearch(userSearch);
       setSearchResults(response.data.items);
       setUserSearch("");
 
       //Navigate
       navigate(`/search/${userSearch}`);
+
+      setLoading(false);
     } catch (error) {
       console.log(error);
     }
@@ -74,7 +77,11 @@ function App() {
       </div>
       <div className="screen-container">
         <GlobalContext.Provider
-          value={{ trendingVideos, setTrendingVideos, searchResults }}
+          value={{
+            trendingVideos,
+            setTrendingVideos,
+            searchResults,
+          }}
         >
           <Routes>
             <Route path="/" element={<HomeScreen />} />