diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx
index 763cc30c4a..a1d144dad7 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/buttons/index.tsx
@@ -1,15 +1,33 @@
+import { useRouter } from 'next/router';
+
+import { useAppSelector } from 'store/hooks';
+import { ScenarioEditStateProps } from 'store/slices/scenarios/edit';
+
import Button from 'components/button';
+import Loading from 'components/loading';
export const ActionsSummaryButtons = ({ onCancel }: { onCancel: () => void }) => {
+ const { query } = useRouter();
+ const { sid } = query as { sid: string };
+
+ const { submittingPU }: { submittingPU: ScenarioEditStateProps['submittingPU'] } = useAppSelector(
+ (state) => state[`/scenarios/${sid}/edit`]
+ );
+
return (
-
+
-
);
};
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
index 69b2e56e24..75ea51a835 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
@@ -13,6 +13,7 @@ import { useToasts } from 'hooks/toast';
import Button from 'components/button';
import type { ButtonProps } from 'components/button';
import Icon from 'components/icon';
+import Loading from 'components/loading';
import { cn } from 'utils/cn';
import HEXAGON_SVG from 'svgs/map/hexagon.svg?sprite';
@@ -28,6 +29,11 @@ export const ActionsSummary = ({
const { query } = useRouter();
const { sid } = query as { sid: string };
const { addToast } = useToasts();
+ const [clearLoading, setClearLoading] = useState<{ [key in PUAction]: boolean }>({
+ include: false,
+ exclude: false,
+ available: false,
+ });
const scenarioSlice = getScenarioEditSlice(sid);
const {
@@ -76,6 +82,8 @@ export const ActionsSummary = ({
break;
}
+ setClearLoading((prev) => ({ ...prev, [PUAction]: true }));
+
scenarioPUDeletion.mutate(
{ sid, PUKind },
{
@@ -126,6 +134,9 @@ export const ActionsSummary = ({
}
);
},
+ onSettled: () => {
+ setClearLoading((prev) => ({ ...prev, [PUAction]: false }));
+ },
}
);
},
@@ -197,7 +208,12 @@ export const ActionsSummary = ({
>
{puTmpIncludedValue.length + puIncludedValue.length} PU
-
+
+
0,
@@ -206,6 +222,7 @@ export const ActionsSummary = ({
size="s"
data-up-action="include"
onClick={onClearAreas}
+ disabled={clearLoading['include']}
>
Clear
@@ -236,7 +253,12 @@ export const ActionsSummary = ({
>
{puTmpExcludedValue.length + puExcludedValue.length} PU
-
+
+
0,
@@ -245,6 +267,7 @@ export const ActionsSummary = ({
size="s"
data-up-action="exclude"
onClick={onClearAreas}
+ disabled={clearLoading['exclude']}
>
Clear
@@ -275,7 +298,12 @@ export const ActionsSummary = ({
>
{puTmpAvailableValue.length + puAvailableValue.length} PU
-
+
+
0,
@@ -284,6 +312,7 @@ export const ActionsSummary = ({
size="s"
data-up-action="available"
onClick={onClearAreas}
+ disabled={clearLoading['available']}
>
Clear
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
index 6f6ae20877..57c38bfdd7 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
@@ -65,6 +65,7 @@ export const PlanningUnitMethods = () => {
setTmpPuExcludedValue,
setTmpPuIncludedValue,
setTmpPuAvailableValue,
+ setSubmittingPU,
} = scenarioSlice.actions;
useEffect(() => {
@@ -81,6 +82,8 @@ export const PlanningUnitMethods = () => {
const onSubmit = useCallback(
async (values) => {
+ dispatch(setSubmittingPU(true));
+
await scenarioPUMutation.mutate(
{
id: `${sid}`,
@@ -152,6 +155,9 @@ export const PlanningUnitMethods = () => {
}
);
},
+ onSettled: () => {
+ dispatch(setSubmittingPU(false));
+ },
}
);
},
diff --git a/app/store/slices/scenarios/edit.ts b/app/store/slices/scenarios/edit.ts
index b5a7a85a46..a5aa30b631 100644
--- a/app/store/slices/scenarios/edit.ts
+++ b/app/store/slices/scenarios/edit.ts
@@ -10,7 +10,7 @@ import { ScenarioSidebarTabs } from 'utils/tabs';
import type { PUAction } from './types';
-interface ScenarioEditStateProps {
+export interface ScenarioEditStateProps {
tab: string;
subtab: string;
@@ -38,6 +38,7 @@ interface ScenarioEditStateProps {
puTmpIncludedValue: ScenarioPlanningUnit['id'][];
puTmpExcludedValue: ScenarioPlanningUnit['id'][];
puTmpAvailableValue: ScenarioPlanningUnit['id'][];
+ submittingPU: boolean;
clicking: boolean;
@@ -94,6 +95,7 @@ const initialState = {
drawingValue: null,
uploading: false,
uploadingValue: null,
+ submittingPU: false,
// SOLUTIONS
selectedSolution: null,
@@ -208,6 +210,9 @@ export function getScenarioEditSlice(id) {
setUploadingValue: (state, action: PayloadAction>) => {
state.uploadingValue = action.payload;
},
+ setSubmittingPU: (state, action: PayloadAction) => {
+ state.submittingPU = action.payload;
+ },
// SOLUTIONS
setSelectedSolution: (state, action: PayloadAction) => {