add loading

client/src/pages/collections/Collections.tsx

@@ -45,6 +45,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+let timer: NodeJS.Timeout | null = null;
+
 const Collections = () => {
   useNavigationHook(ALL_ROUTER_TYPES.COLLECTIONS);
   const { handleAction } = useDialogHook({ type: 'collection' });
@@ -162,26 +164,35 @@ const Collections = () => {
   };
 
   const handleSearch = (value: string) => {
-    const searchWords = [value];
-    const list = value
-      ? collections.filter(c => c._name.includes(value))
-      : collections;
+    if (timer) {
+      clearTimeout(timer);
+    }
+    // add loading manually
+    setLoading(true);
+    timer = setTimeout(() => {
+      const searchWords = [value];
+      const list = value
+        ? collections.filter(c => c._name.includes(value))
+        : collections;
 
-    const highlightList = list.map(c => {
-      Object.assign(c, {
-        nameElement: (
-          <Link to={`/collections/${c._name}`} className={classes.link}>
-            <Highlighter
-              textToHighlight={c._name}
-              searchWords={searchWords}
-              highlightClassName={classes.highlight}
-            />
-          </Link>
-        ),
+      const highlightList = list.map(c => {
+        Object.assign(c, {
+          nameElement: (
+            <Link to={`/collections/${c._name}`} className={classes.link}>
+              <Highlighter
+                textToHighlight={c._name}
+                searchWords={searchWords}
+                highlightClassName={classes.highlight}
+              />
+            </Link>
+          ),
+        });
+        return c;
       });
-      return c;
-    });
-    setSearchedCollections(highlightList);
+
+      setLoading(false);
+      setSearchedCollections(highlightList);
+    }, 300);
   };
 
   const toolbarConfigs: ToolBarConfig[] = [

client/src/pages/partitions/partitions.tsx

@@ -35,6 +35,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+let timer: NodeJS.Timeout | null = null;
+
 const Partitions: FC<{
   collectionName: string;
 }> = ({ collectionName }) => {
@@ -127,25 +129,33 @@ const Partitions: FC<{
   // };
 
   const handleSearch = (value: string) => {
-    const searchWords = [value];
-    console.log('====== search words', searchWords);
-    const list = value
-      ? partitions.filter(p => p._formatName.includes(value))
-      : partitions;
+    if (timer) {
+      clearTimeout(timer);
+    }
+    // add loading manually
+    setLoading(true);
+    timer = setTimeout(() => {
+      const searchWords = [value];
+      const list = value
+        ? partitions.filter(p => p._formatName.includes(value))
+        : partitions;
 
-    const highlightList = list.map(c => {
-      Object.assign(c, {
-        _nameElement: (
-          <Highlighter
-            textToHighlight={c._formatName}
-            searchWords={searchWords}
-            highlightClassName={classes.highlight}
-          />
-        ),
+      const highlightList = list.map(c => {
+        Object.assign(c, {
+          _nameElement: (
+            <Highlighter
+              textToHighlight={c._formatName}
+              searchWords={searchWords}
+              highlightClassName={classes.highlight}
+            />
+          ),
+        });
+        return c;
       });
-      return c;
-    });
-    setSearchedPartitions(highlightList);
+
+      setLoading(false);
+      setSearchedPartitions(highlightList);
+    }, 300);
   };
 
   const toolbarConfigs: ToolBarConfig[] = [