feat: optimise filter panel close lagging

globalfund · Oct 2, 2024 · 45c4717 · 45c4717
1 parent 55e5534
commit 45c4717
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 46 deletions.
diff --git a/src/app/pages/datasets/common/chart-block/index.tsx b/src/app/pages/datasets/common/chart-block/index.tsx
@@ -79,36 +79,23 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
 
   const id = React.useMemo(() => uniqueId("chart-block-"), []);
 
-  const filterPopover = React.useMemo(() => {
+  const filterPopoverContent = React.useMemo(() => {
     return (
-      <Popover
-        disableScrollLock
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        id={`filter-popover-${id}`}
+      <FilterPanel
         onClose={handleFilterPanelClose}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "left",
+        filterGroups={props.filterGroups}
+        toggleFilter={props.toggleFilter}
+        removeFilter={props.removeFilter}
+        appliedFilters={props.appliedFilters}
+        handleResetFilters={props.handleResetFilters}
+        appliedFiltersData={props.appliedFiltersData}
+        appliedFilterBgColors={{
+          hover: "#2196F3",
+          normal: "rgba(33, 150, 243, 0.2)",
         }}
-      >
-        <FilterPanel
-          onClose={handleFilterPanelClose}
-          filterGroups={props.filterGroups}
-          toggleFilter={props.toggleFilter}
-          removeFilter={props.removeFilter}
-          appliedFilters={props.appliedFilters}
-          handleResetFilters={props.handleResetFilters}
-          appliedFiltersData={props.appliedFiltersData}
-          appliedFilterBgColors={{
-            hover: "#2196F3",
-            normal: "rgba(33, 150, 243, 0.2)",
-          }}
-        />
-      </Popover>
+      />
     );
   }, [
-    anchorEl,
     props.appliedFilters,
     props.filterGroups,
     props.appliedFiltersData,
@@ -176,7 +163,19 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
               Filters
             </Button>
           )}
-          {filterPopover}
+          <Popover
+            disableScrollLock
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            id={`filter-popover-${id}`}
+            onClose={handleFilterPanelClose}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "left",
+            }}
+          >
+            {filterPopoverContent}
+          </Popover>
           {/* <Button variant="outlined" startIcon={<SettingsIcon />}>
             Settings
           </Button> */}

diff --git a/src/app/pages/datasets/common/page/index.tsx b/src/app/pages/datasets/common/page/index.tsx
@@ -39,6 +39,21 @@ export const DatasetPage: React.FC<DatasetPageProps> = (
     };
   }, []);
 
+  const filterPopoverContent = React.useMemo(() => {
+    return (
+      <FilterPanel
+        onClose={handleFilterPanelClose}
+        filterGroups={props.filterGroups}
+        appliedFilters={props.appliedFilters}
+        handleResetFilters={props.handleResetFilters}
+        appliedFilterBgColors={{
+          hover: "#FF9800",
+          normal: "rgba(255, 152, 0, 0.2)",
+        }}
+      />
+    );
+  }, [props.filterGroups, props.appliedFilters, props.handleResetFilters]);
+
   return (
     <Box padding="50px 0">
       <Typography
@@ -132,16 +147,7 @@ export const DatasetPage: React.FC<DatasetPageProps> = (
               horizontal: "left",
             }}
           >
-            <FilterPanel
-              onClose={handleFilterPanelClose}
-              filterGroups={props.filterGroups}
-              appliedFilters={props.appliedFilters}
-              handleResetFilters={props.handleResetFilters}
-              appliedFilterBgColors={{
-                hover: "#FF9800",
-                normal: "rgba(255, 152, 0, 0.2)",
-              }}
-            />
+            {filterPopoverContent}
           </Popover>
         </Box>
         {props.toolbarRightContent}

diff --git a/src/app/pages/grants/layout.tsx b/src/app/pages/grants/layout.tsx
@@ -55,6 +55,26 @@ export const GrantsLayout: React.FC<GrantsLayoutProps> = (
     />
   );
 
+  const filterPopoverContent = React.useMemo(() => {
+    return (
+      <FilterPanel
+        onClose={handleFilterPanelClose}
+        filterGroups={filterGroups}
+        appliedFilters={pageAppliedFilters}
+        handleResetFilters={handleResetFilters}
+        appliedFilterBgColors={{
+          hover: "#FF9800",
+          normal: "rgba(255, 152, 0, 0.2)",
+        }}
+      />
+    );
+  }, [
+    filterGroups,
+    pageAppliedFilters,
+    handleResetFilters,
+    handleFilterPanelClose,
+  ]);
+
   return (
     <Box padding="50px 0">
       <Typography variant="h1">
@@ -134,16 +154,7 @@ export const GrantsLayout: React.FC<GrantsLayoutProps> = (
               horizontal: "left",
             }}
           >
-            <FilterPanel
-              filterGroups={filterGroups}
-              onClose={handleFilterPanelClose}
-              appliedFilters={pageAppliedFilters}
-              handleResetFilters={handleResetFilters}
-              appliedFilterBgColors={{
-                hover: "#FF9800",
-                normal: "rgba(255, 152, 0, 0.2)",
-              }}
-            />
+            {filterPopoverContent}
           </Popover>
           <Box
             gap="8px"