Merged in feat/booking-flow-performance (pull request #1282)

feat: booking flow performance

* feat: booking flow performance

* Cleanup


Approved-by: Michael Zetterberg
Approved-by: Pontus Dreij

components/Forms/BookingWidget/FormContent/index.tsx

@@ -22,6 +22,7 @@ export default function FormContent({
   locations,
   formId,
   onSubmit,
+  isSearching,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
   const selectedDate = useWatch({ name: "date" })
@@ -84,6 +85,7 @@ export default function FormContent({
             intent="primary"
             theme="base"
             type="submit"
+            disabled={isSearching}
           >
             <Caption
               color="white"

components/Forms/BookingWidget/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { useRouter } from "next/navigation"
+import { useEffect, useState, useTransition } from "react"
 import { Form as FormRAC } from "react-aria-components"
 import { useFormContext } from "react-hook-form"
 
@@ -26,6 +27,7 @@ export default function Form({
 }: BookingWidgetFormProps) {
   const router = useRouter()
   const lang = useLang()
+  const [isPending, startTransition] = useTransition()
 
   const classNames = bookingWidgetVariants({
     type,
@@ -36,7 +38,6 @@ export default function Form({
 
   function onSubmit(data: BookingWidgetSchema) {
     const locationData: Location = JSON.parse(decodeURIComponent(data.location))
-
     const bookingFlowPage =
       locationData.type == "cities" ? selectHotel(lang) : selectRate(lang)
     const bookingWidgetParams = convertObjToSearchParams({
@@ -51,7 +52,9 @@ export default function Form({
     })
 
     onClose()
-    router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
+    startTransition(() => {
+      router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
+    })
     if (!data.bookingCode?.value) {
       setValue("bookingCode.remember", false)
       localStorage.removeItem("bookingCode")
@@ -72,6 +75,7 @@ export default function Form({
           locations={locations}
           formId={formId}
           onSubmit={handleSubmit(onSubmit)}
+          isSearching={isPending}
         />
       </FormRAC>
     </section>