add: loading states to reservation funnel pages

City-of-Helsinki · Feb 22, 2024 · d80b3e6 · d80b3e6
1 parent 14236b1
commit d80b3e6
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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;