From 782a3316f6cab4c6e5d47da186e067a91aadfb63 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 27 Oct 2022 09:59:14 +0200
Subject: [PATCH] feat: Disable chart field select element when hierarchy is
 being fetched

---
 app/configurator/components/field.tsx | 31 ++++++++++++++++++--
 app/configurator/config-form.tsx      | 41 +++++++++++++++++++--------
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
index 51c7839c4..968dc0aa6 100644
--- 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: theme.spacing(1),
+    marginLeft: theme.spacing(2),
+  },
+}));
+
 export const ControlTabField = ({
   component,
   value,
@@ -625,7 +636,8 @@ export const ChartFieldField = ({
   optional?: boolean;
   disabled?: boolean;
 }) => {
-  const fieldProps = useChartFieldField({ field });
+  const classes = useStyles();
+  const { fetching, ...fieldProps } = useChartFieldField({ field });
 
   const noneLabel = t({
     id: "controls.dimension.none",
@@ -641,8 +653,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>
+          )}
+          {fetching ? (
+            <CircularProgress size={12} className={classes.loadingIndicator} />
+          ) : null}
+        </>
+      }
+      disabled={disabled || fetching}
       options={
         optional
           ? [
diff --git a/app/configurator/config-form.tsx b/app/configurator/config-form.tsx
index 18d580ac6..a116b33a1 100644
--- 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,16 +68,28 @@ export const useChartFieldField = ({
   field,
 }: {
   field: string;
-}): SelectProps => {
+}): SelectProps & {
+  fetching: boolean;
+} => {
+  const unmountedRef = useRef(false);
+  const [fetching, setFetching] = 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) {
+      setFetching(true);
       const dimensionIri = e.target.value as string;
       const { data: hierarchyData } = await client
         .query<DimensionHierarchyQuery, DimensionHierarchyQueryVariables>(
@@ -90,19 +105,20 @@ export const useChartFieldField = ({
         .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,
-        },
-      });
+      if (!unmountedRef.current) {
+        dispatch({
+          type: "CHART_FIELD_CHANGED",
+          value: {
+            locale,
+            field,
+            componentIri: dimensionIri,
+            selectedValues: leaves,
+          },
+        });
+        setFetching(false);
+      }
     } else {
       dispatch({
         type: "CHART_FIELD_DELETED",
@@ -124,6 +140,7 @@ export const useChartFieldField = ({
     name: field,
     value,
     onChange,
+    fetching,
   };
 };