From d80b3e67c9e7a420d7ab0ecf2fc639cb2e67763f Mon Sep 17 00:00:00 2001
From: Mats Eriksson <mats.eriksson@vincit.fi>
Date: Thu, 22 Feb 2024 14:38:07 +0200
Subject: [PATCH] add: loading states to reservation funnel pages

---
 apps/ui/components/reservation/Step0.tsx | 1 +
 apps/ui/components/reservation/Step1.tsx | 1 +
 apps/ui/components/reservation/styles.ts | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/apps/ui/components/reservation/Step0.tsx b/apps/ui/components/reservation/Step0.tsx
index cef3b91d84..f1b8fe7121 100644
--- a/apps/ui/components/reservation/Step0.tsx
+++ b/apps/ui/components/reservation/Step0.tsx
@@ -195,6 +195,7 @@ const Step0 = ({
           type="submit"
           iconRight={<IconArrowRight aria-hidden />}
           data-test="reservation__button--update"
+          isLoading={isSubmitted}
         >
           {t("reservationCalendar:nextStep")}
         </MediumButton>
diff --git a/apps/ui/components/reservation/Step1.tsx b/apps/ui/components/reservation/Step1.tsx
index a2a50d7776..35e59297f2 100644
--- a/apps/ui/components/reservation/Step1.tsx
+++ b/apps/ui/components/reservation/Step1.tsx
@@ -350,6 +350,7 @@ const Step1 = ({
           type="submit"
           iconRight={<IconArrowRight aria-hidden />}
           data-test="reservation__button--update"
+          isLoading={isSubmitted}
         >
           {t(
             `reservationCalendar:${
diff --git a/apps/ui/components/reservation/styles.ts b/apps/ui/components/reservation/styles.ts
index 82b5a445e0..934b0db5f7 100644
--- a/apps/ui/components/reservation/styles.ts
+++ b/apps/ui/components/reservation/styles.ts
@@ -22,6 +22,8 @@ export const ActionContainer = styled.div`
   @media (min-width: ${breakpoints.s}) {
     & > button:first-of-type {
       order: 1;
+      {/* set min-width so the buttons retains their placements even when isLoading is triggered */}
+      min-width: 130px;
     }
 
     display: flex;