feat: Disable chart field select element when hierarchy is being fetched

visualize-admin · Oct 26, 2022 · 3bace8a · 3bace8a
1 parent 008dba9
commit 3bace8a
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 21 deletions.
diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
@@ -1,4 +1,6 @@
 import { t } from "@lingui/macro";
+import { CircularProgress, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { extent, timeFormat, TimeLocaleObject, timeParse } from "d3";
 import get from "lodash/get";
 import { ChangeEvent, ReactNode, useCallback, useMemo, useState } from "react";
@@ -53,6 +55,15 @@ import { IconName } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
 import { getPalette } from "@/palettes";
 
+const useStyles = makeStyles<Theme>((theme) => ({
+  loadingIndicator: {
+    color: theme.palette.grey[700],
+    display: "inline-block",
+    marginTop: 3,
+    marginLeft: 8,
+  },
+}));
+
 export const ControlTabField = ({
   component,
   value,
@@ -625,7 +636,10 @@ export const ChartFieldField = ({
   optional?: boolean;
   disabled?: boolean;
 }) => {
-  const fieldProps = useChartFieldField({ field });
+  const classes = useStyles();
+  const { fetchingHierarchy, ...fieldProps } = useChartFieldField({
+    field,
+  });
 
   const noneLabel = t({
     id: "controls.dimension.none",
@@ -641,8 +655,21 @@ export const ChartFieldField = ({
     <Select
       key={`select-${field}-dimension`}
       id={field}
-      label={optional ? `${label} (${optionalLabel})` : label}
-      disabled={disabled}
+      label={
+        <>
+          {optional ? (
+            <span>
+              {label} ({optionalLabel})
+            </span>
+          ) : (
+            <span>{label}</span>
+          )}
+          {fetchingHierarchy ? (
+            <CircularProgress size={12} className={classes.loadingIndicator} />
+          ) : null}
+        </>
+      }
+      disabled={disabled || fetchingHierarchy}
       options={
         optional
           ? [

diff --git a/app/configurator/config-form.tsx b/app/configurator/config-form.tsx
@@ -5,7 +5,10 @@ import React, {
   InputHTMLAttributes,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
+  useRef,
+  useState,
 } from "react";
 import { useClient } from "urql";
 
@@ -65,18 +68,30 @@ export const useChartFieldField = ({
   field,
 }: {
   field: string;
-}): SelectProps => {
+}): SelectProps & {
+  fetchingHierarchy: boolean;
+} => {
+  const unmountedRef = useRef(false);
+  const [fetchingHierarchy, setIsFetchingHierarchy] = useState(false);
   const [state, dispatch] = useConfiguratorState();
   const client = useClient();
   const locale = useLocale();
 
+  useEffect(() => {
+    return () => {
+      unmountedRef.current = true;
+    };
+  }, []);
+
   const onChange = useEvent(async (e: SelectChangeEvent<unknown>) => {
     if (!state.dataSet) {
       return;
     }
+
     if (e.target.value !== FIELD_VALUE_NONE) {
+      setIsFetchingHierarchy(true);
       const dimensionIri = e.target.value as string;
-      const { data: hierarchyData } = await client
+      client
         .query<DimensionHierarchyQuery, DimensionHierarchyQueryVariables>(
           DimensionHierarchyDocument,
           {
@@ -87,22 +102,29 @@ export const useChartFieldField = ({
             sourceType: state.dataSource.type,
           }
         )
-        .toPromise();
-      const tree = hierarchyData?.dataCubeByIri?.dimensionByIri
-        ?.hierarchy as HierarchyValue[];
-
-      // If the dimension has a hierarchy, we select leaves
-      const leaves = getLeaves(tree);
-
-      dispatch({
-        type: "CHART_FIELD_CHANGED",
-        value: {
-          locale,
-          field,
-          componentIri: dimensionIri,
-          selectedValues: leaves,
-        },
-      });
+        .toPromise()
+        .then((response) => {
+          const tree = response.data?.dataCubeByIri?.dimensionByIri
+            ?.hierarchy as HierarchyValue[];
+          const leaves = getLeaves(tree);
+
+          if (!unmountedRef.current) {
+            dispatch({
+              type: "CHART_FIELD_CHANGED",
+              value: {
+                locale,
+                field,
+                componentIri: dimensionIri,
+                selectedValues: leaves,
+              },
+            });
+          }
+        })
+        .finally(() => {
+          if (!unmountedRef.current) {
+            setIsFetchingHierarchy(false);
+          }
+        });
     } else {
       dispatch({
         type: "CHART_FIELD_DELETED",
@@ -124,6 +146,7 @@ export const useChartFieldField = ({
     name: field,
     value,
     onChange,
+    fetchingHierarchy,
   };
 };