diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar.tsx index 6dae669177..7534fc77d4 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 = ({ defaultValue, } = filter; const cascadingFilters = useCascadingFilters(id); + const [loading, setLoading] = useState(true); const [state, setState] = useState({ data: undefined }); const [formData, setFormData] = useState>({}); const [target] = targets; @@ -241,6 +249,7 @@ const FilterValue: React.FC = ({ requestParams: { dashboardId: 0 }, }).then(response => { setState({ data: response.result[0].data }); + setLoading(false); }); } }, [cascadingFilters]); @@ -248,6 +257,14 @@ const FilterValue: React.FC = ({ const setExtraFormData = (extraFormData: ExtraFormData) => onExtraFormDataChange(filter, extraFormData); + if (loading) { + return ( + + + + ); + } + return (
{ @@ -309,7 +326,7 @@ export const CascadeFilterControl: React.FC = ({ {filter.cascadeChildren?.map(childFilter => ( -
  • +