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,
   };
 };
 
diff --git a/app/configurator/configurator-state.spec.tsx b/app/configurator/configurator-state.spec.tsx
index 6420e5928..d991545da 100644
--- a/app/configurator/configurator-state.spec.tsx
+++ b/app/configurator/configurator-state.spec.tsx
@@ -18,6 +18,7 @@ import {
   deriveFiltersFromFields,
   getFiltersByMappingStatus,
   getLocalStorageKey,
+  handleChartFieldChanged,
   handleChartOptionChanged,
   initChartStateFromChart,
   initChartStateFromCube,
@@ -40,6 +41,39 @@ jest.mock("@/utils/chart-config/exchange", () => ({
   fetchChartConfig: jest.fn(),
 }));
 
+jest.mock("@/graphql/client", () => {
+  return {
+    client: {
+      readQuery: () => {
+        return {
+          data: {
+            dataCubeByIri: {
+              dimensions: [
+                {
+                  __typename: "GeoShapesDimension",
+                  iri: "newAreaLayerColorIri",
+                  values: [{ value: "orange", label: "orange" }],
+                },
+                {
+                  __typename: "GeoCoordinatesDimension",
+                  iri: "symbolLayerIri",
+                  values: [{ value: "x", label: "y" }],
+                },
+              ],
+              measures: [
+                {
+                  __typename: "NumericalMeasure",
+                  iri: "measure",
+                },
+              ],
+            },
+          },
+        };
+      },
+    },
+  };
+});
+
 afterEach(() => {
   jest.restoreAllMocks();
 });
@@ -690,20 +724,53 @@ describe("colorMapping", () => {
   });
 });
 
-describe("handleChartOptionChanged", () => {
-  jest.mock("@/graphql/client", () => ({
-    readQuery: () => {
-      return {
-        dimensions: [
-          {
-            iri: "newAreaLayerColorIri",
-            values: [{ value: "orange", label: "orange" }],
+describe("handleChartFieldChanged", () => {
+  it("should not reset symbol layer when it's being updated", () => {
+    const state = {
+      state: "CONFIGURING_CHART",
+      dataSet: "mapDataset",
+      dataSource: {
+        type: "sparql",
+        url: "fakeUrl",
+      },
+      chartConfig: {
+        chartType: "map",
+        fields: {
+          symbolLayer: {
+            componentIri: "symbolLayerIri",
+            color: {
+              type: "categorical",
+              componentIri: "symbolLayerColorIri",
+              palette: "oranges",
+              colorMapping: {
+                red: "green",
+                green: "blue",
+                blue: "red",
+              },
+            },
           },
-        ],
-      };
-    },
-  }));
+        },
+        filters: {},
+      },
+    };
+
+    handleChartFieldChanged(
+      state as unknown as ConfiguratorStateConfiguringChart,
+      {
+        type: "CHART_FIELD_CHANGED",
+        value: {
+          locale: "en",
+          field: "symbolLayer",
+          componentIri: "symbolLayerIri",
+        },
+      }
+    );
 
+    expect(state.chartConfig.fields.symbolLayer.color).toBeDefined();
+  });
+});
+
+describe("handleChartOptionChanged", () => {
   it("should reset previous color filters", () => {
     const state = {
       state: "CONFIGURING_CHART",
@@ -713,6 +780,7 @@ describe("handleChartOptionChanged", () => {
         url: "fakeUrl",
       },
       chartConfig: {
+        chartType: "map",
         fields: {
           areaLayer: {
             componentIri: "areaLayerIri",
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index edefffd55..6c6b758b5 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -41,6 +41,8 @@ import {
   isColumnConfig,
   isMapConfig,
   isSegmentInConfig,
+  MapConfig,
+  MapFields,
   NumericalColorField,
 } from "@/configurator/config-types";
 import {
@@ -71,6 +73,8 @@ import {
   DataCubeMetadataWithComponentValuesQuery,
   DataCubeMetadataWithComponentValuesQueryVariables,
   DimensionMetadataFragment,
+  NumericalMeasure,
+  OrdinalMeasure,
 } from "@/graphql/query-hooks";
 import { DataCubeMetadata } from "@/graphql/types";
 import { Locale } from "@/locales/locales";
@@ -728,7 +732,37 @@ export const getChartOptionField = (
   );
 };
 
-const handleChartFieldChanged = (
+const initializeMapField = ({
+  chartConfig,
+  field,
+  componentIri,
+  dimensions,
+  measures,
+}: {
+  chartConfig: MapConfig;
+  field: "areaLayer" | "symbolLayer";
+  componentIri: string;
+  dimensions: DimensionMetadataFragment[];
+  measures: (NumericalMeasure | OrdinalMeasure)[];
+}) => {
+  if (field === "areaLayer") {
+    chartConfig.fields.areaLayer = getInitialAreaLayer({
+      component: dimensions
+        .filter(isGeoShapesDimension)
+        .find((d) => d.iri === componentIri)!,
+      measure: measures[0],
+    });
+  } else if (field === "symbolLayer") {
+    chartConfig.fields.symbolLayer = getInitialSymbolLayer({
+      component: dimensions
+        .filter(isGeoDimension)
+        .find((d) => d.iri === componentIri)!,
+      measure: measures.filter(isNumericalMeasure)[0],
+    });
+  }
+};
+
+export const handleChartFieldChanged = (
   draft: ConfiguratorState,
   action: Extract<ConfiguratorStateAction, { type: "CHART_FIELD_CHANGED" }>
 ) => {
@@ -762,16 +796,13 @@ const handleChartFieldChanged = (
     // optionalFields = ['segment', 'areaLayer', 'symbolLayer'],
     // should be reflected in chart encodings
     if (field === "segment") {
-      const colorMapping =
-        component?.values &&
-        mapValueIrisToColor({
-          palette: DEFAULT_PALETTE,
-          dimensionValues: component?.values,
-        });
-
       // FIXME: This should be more chart specific
       // (no "stacked" for scatterplots for instance)
       if (isSegmentInConfig(draft.chartConfig)) {
+        const colorMapping = mapValueIrisToColor({
+          palette: DEFAULT_PALETTE,
+          dimensionValues: component?.values || [],
+        });
         draft.chartConfig.filters[componentIri] = {
           type: "multi",
           values: Object.fromEntries(
@@ -779,12 +810,12 @@ const handleChartFieldChanged = (
           ),
         };
         draft.chartConfig.fields.segment = {
-          componentIri: componentIri,
+          componentIri,
           palette: DEFAULT_PALETTE,
           // Type exists only within column charts.
           ...(isColumnConfig(draft.chartConfig) && { type: "stacked" }),
           sorting: DEFAULT_SORTING,
-          colorMapping: colorMapping,
+          colorMapping,
         };
       }
 
@@ -796,21 +827,13 @@ const handleChartFieldChanged = (
           );
       }
     } else if (isMapConfig(draft.chartConfig)) {
-      if (field === "areaLayer") {
-        draft.chartConfig.fields.areaLayer = getInitialAreaLayer({
-          component: dimensions
-            .filter(isGeoShapesDimension)
-            .find((d) => d.iri === componentIri)!,
-          measure: measures[0],
-        });
-      } else if (field === "symbolLayer") {
-        draft.chartConfig.fields.symbolLayer = getInitialSymbolLayer({
-          component: dimensions
-            .filter(isGeoDimension)
-            .find((d) => d.iri === componentIri)!,
-          measure: measures.filter(isNumericalMeasure)[0],
-        });
-      }
+      initializeMapField({
+        chartConfig: draft.chartConfig,
+        field: field as keyof MapFields,
+        componentIri,
+        dimensions,
+        measures,
+      });
     }
   } else {
     // The field is being updated
@@ -820,12 +843,10 @@ const handleChartFieldChanged = (
       draft.chartConfig.fields.segment &&
       "palette" in draft.chartConfig.fields.segment
     ) {
-      const colorMapping =
-        component &&
-        mapValueIrisToColor({
-          palette: draft.chartConfig.fields.segment.palette || DEFAULT_PALETTE,
-          dimensionValues: component?.values,
-        });
+      const colorMapping = mapValueIrisToColor({
+        palette: draft.chartConfig.fields.segment.palette || DEFAULT_PALETTE,
+        dimensionValues: component?.values || [],
+      });
 
       draft.chartConfig.fields.segment.componentIri = componentIri;
       draft.chartConfig.fields.segment.colorMapping = colorMapping;
@@ -836,10 +857,11 @@ const handleChartFieldChanged = (
         ),
       };
     } else {
-      // Reset other field options
+      // Reset field properties, excluding componentIri.
       (draft.chartConfig.fields as GenericFields)[field] = {
-        componentIri: componentIri,
+        componentIri,
       };
+
       // if x !== time, also deactivate interactive time filter
       if (
         isColumnConfig(draft.chartConfig) &&
@@ -853,6 +875,14 @@ const handleChartFieldChanged = (
           false,
           Object
         );
+      } else if (isMapConfig(draft.chartConfig)) {
+        initializeMapField({
+          chartConfig: draft.chartConfig,
+          field: field as keyof MapFields,
+          componentIri,
+          dimensions,
+          measures,
+        });
       }
     }