[incubator-superset] branch master updated: chore: Add Loading icon to Filter Bar (#12158)

[rusackas]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 93af329  chore: Add Loading icon to Filter Bar (#12158)
93af329 is described below

commit 93af3290787499ce9c0c2ffe931e1a7557a0b020
Author: Agata Stawarz <47450693+agata...@users.noreply.github.com>
AuthorDate: Wed Dec 23 03:19:18 2020 +0100

    chore: Add Loading icon to Filter Bar (#12158)
    
    * Add Loading icon to Filter Bar
    
    * Change Loading Box height to gridUnits
---
 .../dashboard/components/nativeFilters/FilterBar.tsx  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git 
a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx 
b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx
index 6dae669..7534fc7 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx
@@ -31,6 +31,7 @@ import Button from 'src/components/Button';
 import Icon from 'src/components/Icon';
 import { getChartDataRequest } from 'src/chart/chartAction';
 import { areObjectsEqual } from 'src/reduxUtils';
+import Loading from 'src/components/Loading';
 import FilterConfigurationLink from './FilterConfigurationLink';
 // import FilterScopeModal from 
'src/dashboard/components/filterscope/FilterScopeModal';
 
@@ -182,6 +183,12 @@ const StyledCaretIcon = styled(Icon)`
   margin-top: ${({ theme }) => -theme.gridUnit}px;
 `;
 
+const StyledLoadingBox = styled.div`
+  position: relative;
+  height: ${({ theme }) => theme.gridUnit * 8}px;
+  margin-bottom: ${({ theme }) => theme.gridUnit * 6}px;
+`;
+
 interface FilterProps {
   filter: Filter;
   icon?: React.ReactElement;
@@ -206,6 +213,7 @@ const FilterValue: React.FC<FilterProps> = ({
     defaultValue,
   } = filter;
   const cascadingFilters = useCascadingFilters(id);
+  const [loading, setLoading] = useState<boolean>(true);
   const [state, setState] = useState({ data: undefined });
   const [formData, setFormData] = useState<Partial<QueryFormData>>({});
   const [target] = targets;
@@ -241,6 +249,7 @@ const FilterValue: React.FC<FilterProps> = ({
         requestParams: { dashboardId: 0 },
       }).then(response => {
         setState({ data: response.result[0].data });
+        setLoading(false);
       });
     }
   }, [cascadingFilters]);
@@ -248,6 +257,14 @@ const FilterValue: React.FC<FilterProps> = ({
   const setExtraFormData = (extraFormData: ExtraFormData) =>
     onExtraFormDataChange(filter, extraFormData);
 
+  if (loading) {
+    return (
+      <StyledLoadingBox>
+        <Loading />
+      </StyledLoadingBox>
+    );
+  }
+
   return (
     <Form
       onFinish={values => {
@@ -309,7 +326,7 @@ export const CascadeFilterControl: 
React.FC<CascadeFilterControlProps> = ({
 
       <StyledCascadeChildrenList>
         {filter.cascadeChildren?.map(childFilter => (
-          <li>
+          <li key={childFilter.id}>
             <CascadeFilterControl
               filter={childFilter}
               onExtraFormDataChange={onExtraFormDataChange}