Adds loadingTexts to buttons with isLoading

- includes preliminary translations

Author: vincit-matu

apps/ui/components/calendar/ReservationCalendarControls.tsx

@@ -664,6 +664,7 @@ const ReservationCalendarControls = <T extends Record<string, unknown>>({
             }}
             disabled={!isReservable}
             isLoading={isReserving}
+            loadingText={t("reservationCalendar:makeReservationLoading")}
             data-test="reservation__button--submit"
           >
             {t("reservationCalendar:makeReservation")}

apps/ui/components/reservation-unit/QuickReservation.tsx

@@ -705,6 +705,7 @@ const QuickReservation = ({
                   }
                 }}
                 isLoading={isReserving}
+                loadingText={t("reservationCalendar:makeReservationLoading")}
                 data-test="quick-reservation__button--submit"
               >
                 {t("reservationCalendar:makeReservation")}

apps/ui/components/reservation/EditStep0.tsx

@@ -492,6 +492,7 @@ const EditStep0 = ({
           }}
           data-testid="reservation-edit__button--continue"
           isLoading={isLoading}
+          loadingText={t("reservationCalendar:nextStepLoading")}
         >
           {t("reservationCalendar:nextStep")}
         </MediumButton>

apps/ui/components/reservation/EditStep1.tsx

@@ -352,6 +352,7 @@ const EditStep1 = ({
             disabled={isSubmitting}
             data-testid="reservation-edit__button--submit"
             isLoading={isSubmitting}
+            loadingText={t("reservations:saveNewTimeLoading")}
           >
             {t("reservations:saveNewTime")}
           </MediumButton>

apps/ui/components/reservation/Step0.tsx

@@ -198,6 +198,7 @@ const Step0 = ({
           iconRight={<IconArrowRight aria-hidden />}
           data-test="reservation__button--update"
           isLoading={isSubmitting}
+          loadingText={t("reservationCalendar:nextStepLoading")}
         >
           {t("reservationCalendar:nextStep")}
         </MediumButton>

apps/ui/components/reservation/Step1.tsx

@@ -91,9 +91,9 @@ const Step1 = ({
 }: Props): JSX.Element => {
   const { t } = useTranslation();
   const {
-    formState: { isSubmitting, isSubmitted },
+    formState: { isSubmitting },
   } = useFormContext();
-
+  const [isSubmitted, setIsSubmitted] = useState(false);
   const [areTermsSpaceAccepted, setAreTermsSpaceAccepted] = useState(false);
   const [areServiceSpecificTermsAccepted, setAreServiceSpecificTermsAccepted] =
     useState(false);
@@ -139,6 +139,7 @@ const Step1 = ({
     <Form
       onSubmit={(e) => {
         e.preventDefault();
+        setIsSubmitted(true);
         if (areTermsSpaceAccepted && areServiceSpecificTermsAccepted) {
           handleSubmit();
         }
@@ -355,6 +356,9 @@ const Step1 = ({
           }
           data-test="reservation__button--update"
           isLoading={isSubmitting}
+          loadingText={t(
+            `reservationCalendar:${requiresHandling ? "nextStep" : "makeReservation"}Loading`
+          )}
           disabled={!areTermsSpaceAccepted || !areServiceSpecificTermsAccepted}
         >
           {t(

apps/ui/public/locales/en/reservationCalendar.json

@@ -20,6 +20,7 @@
   "showView": "Show {{view}} view",
   "initialReservation": "Preliminary booking",
   "makeReservation": "Book",
+  "makeReservationLoading": "Booking",
   "reserverInfo": "Booker’s information",
   "reservationInfo": "Booking details",
   "notification": {
@@ -71,6 +72,7 @@
     "step3": "Booking ready"
   },
   "nextStep": "Continue",
+  "nextStepLoading": "Continuing",
   "reservationSummary": "Booking summary",
   "errors": {
     "bufferCollision": "The booking is too close to the previous or next booking. Please change the booking time.",

apps/ui/public/locales/en/reservations.json

@@ -17,11 +17,13 @@
   "editReservationTime": "Change the booking time",
   "cancelEditReservationTime": "Stop editing",
   "saveNewTime": "Save the new time",
+  "saveNewTimeLoadingText": "Saving the new time",
   "saveNewTimeSuccess": "Time of the booking has been changed",
   "cancelReservation": "Cancel booking",
   "cancelReservationCancellation": "Undo the cancelling",
   "cancelReservationAbbreviated": "Cancel",
   "cancelApplication": "Cancel application",
+  "cancelLoadingText": "Cancelling",
   "cancelReservationBody": "You are about to cancel your booking.",
   "redoReservation": "Make a new booking",
   "upcomingReservations": "Upcoming",

apps/ui/public/locales/fi/reservationCalendar.json

@@ -20,6 +20,7 @@
   "showView": "Näytä {{view}}näkymä",
   "initialReservation": "Alustava varaus",
   "makeReservation": "Varaa",
+  "makeReservationLoading": "Varataan",
   "reserverInfo": "Varaajan tiedot",
   "reservationInfo": "Varauksen tiedot",
   "notification": {
@@ -69,6 +70,7 @@
     "step3": "Varaus tehty"
   },
   "nextStep": "Jatka",
+  "nextStepLoading": "Jatketaan",
   "reservationSummary": "Varauksen yhteenveto",
   "errors": {
     "bufferCollision": "Varaus on liian lähellä edellistä tai seuraavaa varausta. Muuta varauksen ajankohtaa.",

apps/ui/public/locales/fi/reservations.json

@@ -17,11 +17,13 @@
   "editReservationTime": "Muuta varauksen aikaa",
   "cancelEditReservationTime": "Keskeytä muokkaus",
   "saveNewTime": "Tallenna uusi aika",
+  "saveNewTimeLoadingText": "Tallennetaan uusi aika",
   "saveNewTimeSuccess": "Varauksen aika muutettu",
   "cancelReservation": "Peru varaus",
   "cancelReservationCancellation": "Keskeytä peruminen",
   "cancelReservationAbbreviated": "Peru",
   "cancelApplication": "Peru hakemus",
+  "cancelLoadingText": "Perutaan",
   "cancelReservationBody": "Olet perumassa tekemääsi varausta.",
   "redoReservation": "Varaa uudelleen",
   "upcomingReservations": "Tulevat",