From 69365d3d939a85d5090a588a416057c0e787d7fd Mon Sep 17 00:00:00 2001
From: Jernej Pregelj <jernej.pregelj88@gmail.com>
Date: Tue, 6 Aug 2019 11:07:14 +0200
Subject: [PATCH] delay to reactive search

---
 client/src/routes/Search/index.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/client/src/routes/Search/index.tsx b/client/src/routes/Search/index.tsx
index 2477a31..a3f9e3b 100644
--- a/client/src/routes/Search/index.tsx
+++ b/client/src/routes/Search/index.tsx
@@ -32,7 +32,7 @@ interface SearchState {
 
 class Search extends PureComponent<SearchProps, SearchState> {
     public static contextType = User
-
+    public timeout: any = false
     public state = {
         results: [],
         totalResults: 0,
@@ -134,10 +134,24 @@ class Search extends PureComponent<SearchProps, SearchState> {
         this.setState({
             [event.currentTarget.name]: event.currentTarget.value
         } as any, () => {
-            this.searchAssets()
+            this.pendingSearch()
         })
     }
 
+    private pendingSearch = () => {
+        this.setState({isLoading:true},()=>{
+            if(this.timeout){
+                clearTimeout(this.timeout)
+            }
+            this.timeout = setTimeout(this.executeSearch,250);
+        })
+    }
+
+    private executeSearch=()=>{
+        this.timeout = false
+        this.searchAssets()
+    }
+
     public setCategory = (category: string) => {
         this.setState({ category }, () => this.searchAssets())
     }
@@ -193,11 +207,13 @@ class Search extends PureComponent<SearchProps, SearchState> {
 
                             {this.renderResults()}
 
-                            <Pagination
-                                totalPages={totalPages}
-                                currentPage={currentPage}
-                                handlePageClick={this.handlePageClick}
-                            />
+                            {!this.state.isLoading && (
+                                <Pagination
+                                    totalPages={totalPages}
+                                    currentPage={currentPage}
+                                    handlePageClick={this.handlePageClick}
+                                />
+                            )}
                         </div>
                     </div>
                 </Content>