From e3b14fe17063e14e8d1c654944b9cda0a970b0e6 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Wed, 29 Sep 2021 07:37:02 -0300
Subject: [PATCH] fix: Overhead when changing the filter name (#16877)

---
 .../FiltersConfigModal/FiltersConfigModal.tsx | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
index f0343842ef..d72156dd71 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -17,8 +17,9 @@
  * under the License.
  */
 import React, { useCallback, useMemo, useState, useRef } from 'react';
-import { uniq } from 'lodash';
+import { uniq, debounce } from 'lodash';
 import { t, styled } from '@superset-ui/core';
+import { SLOW_DEBOUNCE } from 'src/constants';
 import { Form } from 'src/common/components';
 import { StyledModal } from 'src/components/Modal';
 import ErrorBoundary from 'src/components/ErrorBoundary';
@@ -233,6 +234,23 @@ export function FiltersConfigModal({
     }
   };
 
+  const onValuesChange = useMemo(
+    () =>
+      debounce((changes: any, values: NativeFiltersForm) => {
+        if (
+          changes.filters &&
+          Object.values(changes.filters).some(
+            (filter: any) => filter.name != null,
+          )
+        ) {
+          // we only need to set this if a name changed
+          setFormValues(values);
+        }
+        setSaveAlertVisible(false);
+      }, SLOW_DEBOUNCE),
+    [],
+  );
+
   return (
     <StyledModalWrapper
       visible={isOpen}
@@ -259,18 +277,7 @@ export function FiltersConfigModal({
           <StyledForm
             preserve={false}
             form={form}
-            onValuesChange={(changes, values: NativeFiltersForm) => {
-              if (
-                changes.filters &&
-                Object.values(changes.filters).some(
-                  (filter: any) => filter.name != null,
-                )
-              ) {
-                // we only need to set this if a name changed
-                setFormValues(values);
-              }
-              setSaveAlertVisible(false);
-            }}
+            onValuesChange={onValuesChange}
             layout="vertical"
           >
             <FilterTabs