feat: trigger loading states immediately upon navigation

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/loading.tsx

@@ -0,0 +1,16 @@
+import { HotelInfoCardSkeleton } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
+import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton"
+
+// Select Rate loading doesn't need a layout and wrapper
+// to force loading.tsx to show again since refetch of
+// availability happens client-side and only the RoomCards
+// display a loading state since we already have the hotel
+// data
+export default function LoadingSelectRate() {
+  return (
+    <>
+      <HotelInfoCardSkeleton />
+      <RoomsContainerSkeleton />
+    </>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -1,12 +1,8 @@
-import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
-import { Suspense } from "react"
 
 import { combineRegExps, rateTypeRegex, REDEMPTION } from "@/constants/booking"
 
 import SelectRate from "@/components/HotelReservation/SelectRate"
-import { HotelInfoCardSkeleton } from "@/components/HotelReservation/SelectRate/HotelInfoCard"
-import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/RoomsContainer/RoomsContainerSkeleton"
 import { convertSearchParamsToObj } from "@/utils/url"
 
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
@@ -21,7 +17,6 @@ export default async function SelectRatePage({
   params,
   searchParams,
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
-  const suspenseKey = stringify(searchParams)
   const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
 
   const isMultiRoom = booking.rooms.length > 1
@@ -40,17 +35,5 @@ export default async function SelectRatePage({
     delete searchParams.bookingCode
   }
 
-  return (
-    <Suspense
-      key={suspenseKey}
-      fallback={
-        <>
-          <HotelInfoCardSkeleton />
-          <RoomsContainerSkeleton />
-        </>
-      }
-    >
-      <SelectRate params={params} searchParams={searchParams} />
-    </Suspense>
-  )
+  return <SelectRate params={params} searchParams={searchParams} />
 }