planning units: adds loaders after saving selection and clearing

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 (
-    <div className="flex space-x-2">
+    <div className="relative flex space-x-2">
       <Button theme="secondary" size="s" onClick={onCancel}>
         <span>Cancel</span>
       </Button>
 
-      <Button theme="primary" size="s" type="submit">
+      <Button theme="primary" size="s" type="submit" disabled={submittingPU}>
         <span>Save selection</span>
       </Button>
+      <Loading
+        visible={submittingPU}
+        className="absolute right-0 top-1/2 -translate-y-1/2"
+        iconClassName="w-5 h-5 text-white"
+      />
     </div>
   );
 };

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
           </span>
-          <div className="flex flex-1 justify-end">
+          <div className="relative flex flex-1 items-center justify-end space-x-4">
+            <Loading
+              visible={clearLoading['include']}
+              className="static"
+              iconClassName="w-5 h-5 text-white"
+            />
             <Button
               className={cn('invisible', {
                 visible: PUData.included.length > 0,
@@ -206,6 +222,7 @@ export const ActionsSummary = ({
               size="s"
               data-up-action="include"
               onClick={onClearAreas}
+              disabled={clearLoading['include']}
             >
               <div className="flex items-center space-x-2">
                 <span>Clear</span>
@@ -236,7 +253,12 @@ export const ActionsSummary = ({
           >
             {puTmpExcludedValue.length + puExcludedValue.length} PU
           </span>
-          <div className="flex flex-1 justify-end">
+          <div className="relative flex flex-1 items-center justify-end space-x-4">
+            <Loading
+              visible={clearLoading['exclude']}
+              className="static"
+              iconClassName="w-5 h-5 text-white"
+            />
             <Button
               className={cn('invisible', {
                 visible: PUData.excluded.length > 0,
@@ -245,6 +267,7 @@ export const ActionsSummary = ({
               size="s"
               data-up-action="exclude"
               onClick={onClearAreas}
+              disabled={clearLoading['exclude']}
             >
               <div className="flex items-center space-x-2">
                 <span>Clear</span>
@@ -275,7 +298,12 @@ export const ActionsSummary = ({
           >
             {puTmpAvailableValue.length + puAvailableValue.length} PU
           </span>
-          <div className="flex flex-1 justify-end">
+          <div className="relative flex flex-1 items-center justify-end space-x-4">
+            <Loading
+              visible={clearLoading['available']}
+              className="static"
+              iconClassName="w-5 h-5 text-white"
+            />
             <Button
               className={cn('invisible', {
                 visible: PUData.available.length > 0,
@@ -284,6 +312,7 @@ export const ActionsSummary = ({
               size="s"
               data-up-action="available"
               onClick={onClearAreas}
+              disabled={clearLoading['available']}
             >
               <div className="flex items-center space-x-2">
                 <span>Clear</span>

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));
+          },
         }
       );
     },

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<Record<string, object>>) => {
         state.uploadingValue = action.payload;
       },
+      setSubmittingPU: (state, action: PayloadAction<ScenarioEditStateProps['submittingPU']>) => {
+        state.submittingPU = action.payload;
+      },
 
       // SOLUTIONS
       setSelectedSolution: (state, action: PayloadAction<Solution>) => {