Improve dashboard search performance

ui/dashboard/src/components/DashboardList/index.tsx

@@ -379,7 +379,7 @@ const DashboardList = () => {
       return;
     }
     if (!searchValue) {
-      setFilteredDashboards(unfilteredDashboards);
+      setFilteredDashboards(() => unfilteredDashboards);
       return;
     }
 
@@ -393,7 +393,9 @@ const DashboardList = () => {
       }
     });
 
-    setFilteredDashboards(sortDashboardSearchResults(filtered, dashboardsMap));
+    setFilteredDashboards(() =>
+      sortDashboardSearchResults(filtered, dashboardsMap),
+    );
   }, [
     availableDashboardsLoaded,
     dashboardsMap,

ui/dashboard/src/components/DashboardSearch/index.tsx

@@ -1,7 +1,8 @@
 import SearchInput from "../SearchInput";
+import useDebouncedEffect from "@powerpipe/hooks/useDebouncedEffect";
 import { DashboardActions } from "@powerpipe/types";
-import { useCallback } from "react";
 import { useDashboard } from "@powerpipe/hooks/useDashboard";
+import { useEffect, useState } from "react";
 
 const DashboardSearch = () => {
   const {
@@ -11,21 +12,23 @@ const DashboardSearch = () => {
     search,
     metadata,
   } = useDashboard();
+  const [innerValue, setInnerValue] = useState(search.value);
 
-  const updateSearchValue = useCallback(
-    (value) =>
-      dispatch({ type: DashboardActions.SET_DASHBOARD_SEARCH_VALUE, value }),
-    [dispatch],
-  );
+  useEffect(() => {
+    setInnerValue(() => search.value);
+  }, [search.value]);
+
+  const updateSearchValue = (value) =>
+    dispatch({ type: DashboardActions.SET_DASHBOARD_SEARCH_VALUE, value });
+  useDebouncedEffect(() => updateSearchValue(innerValue), 250, [innerValue]);
 
   return (
     <div className="w-full sm:w-56 md:w-72 lg:w-96">
       <SearchInput
-        //@ts-ignore
         disabled={!metadata || !availableDashboardsLoaded}
         placeholder={minBreakpoint("sm") ? "Search dashboards..." : "Search..."}
-        value={search.value}
-        setValue={updateSearchValue}
+        value={innerValue}
+        setValue={setInnerValue}
       />
     </div>
   );