Restore loading state for server action in custom button (#3759)

* restore loading state for server action in custom button

* try/catch

* add loading check to test case

* add delay to action

Author: bjosttveit

src/layout/CustomButton/CustomButtonComponent.tsx

@@ -202,7 +202,7 @@ export const CustomButtonComponent = ({ baseComponentId }: PropsFromGenericCompo
   const acquireLock = FD.useLocking(id);
   const isAuthorized = useIsAuthorized();
   const { handleClientActions } = useHandleClientActions();
-  const { mutate: handleServerAction, error } = useMutation({
+  const { mutateAsync: handleServerAction, error } = useMutation({
     mutationFn: useHandleServerActionMutationFn(acquireLock),
   });
 
@@ -263,7 +263,11 @@ export const CustomButtonComponent = ({ baseComponentId }: PropsFromGenericCompo
         if (isClientAction(action)) {
           await handleClientActions([action]);
         } else if (isServerAction(action)) {
-          handleServerAction({ action, buttonId: id });
+          try {
+            await handleServerAction({ action, buttonId: id });
+          } catch {
+            // Error is handled elsewhere
+          }
         }
       }
     });

test/e2e/integration/frontend-test/custom-button.ts

@@ -4,9 +4,18 @@ const appFrontend = new AppFrontend();
 
 describe('Custom Button', () => {
   it('Should perform action and update the frontend with the updated datamodel', () => {
+    cy.intercept({ url: '**/instances/**/actions*' }, (req) => {
+      req.reply((res) => {
+        res.setDelay(500);
+      });
+    }).as('actionWithDelay');
+
     cy.goto('changename');
 
     cy.findByRole('button', { name: 'Fyll ut skjema' }).click();
+    cy.findByRole('button', { name: 'Fyll ut skjema' }).should('be.disabled'); // Disabled while loading
+    cy.wait('@actionWithDelay');
+    cy.findByRole('button', { name: 'Fyll ut skjema' }).should('not.be.disabled'); // Enabled when finished
     cy.findByRole('textbox', { name: 'Denne oppdateres av custom button' }).should(
       'have.value',
       'Her kommer det data fra backend',