Merged in fix/hotelreservation-skeletons (pull request #1270)

fix: skeletons in hotelreservation key includes all search params

* fix: skeletons in hotelreservation key includes all search params


Approved-by: Joakim Jäderberg

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -16,11 +16,16 @@ export default async function SelectHotelMapPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
+  const roomKey = Object.keys(searchParams)
+    .filter((key) => key.startsWith("room["))
+    .map((key) => searchParams[key])
+    .join("-")
+
   return (
     <div className={styles.main}>
       <MapContainer>
         <Suspense
-          key={searchParams.city}
+          key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
           <SelectHotelMapContainer searchParams={searchParams} />

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -20,7 +20,7 @@ export default async function SelectHotelPage({
 
   return (
     <Suspense
-      key={`${searchParams.name}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
+      key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}`}
       fallback={<SelectHotelSkeleton />}
     >
       <SelectHotel params={params} searchParams={searchParams} />

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

@@ -79,6 +79,11 @@ export default async function SelectRatePage({
 
   const hotelId = +hotel.id
 
+  const roomKey = Object.keys(searchParams)
+    .filter((key) => key.startsWith("room["))
+    .map((key) => searchParams[key])
+    .join("-")
+
   return (
     <>
       <HotelInfoCard
@@ -90,7 +95,10 @@ export default async function SelectRatePage({
         childArray={childrenInRoom}
       />
 
-      <Suspense key={hotelId} fallback={<RoomsContainerSkeleton />}>
+      <Suspense
+        key={`${searchParams.city}-${searchParams.fromDate}-${searchParams.toDate}-${roomKey}-${searchParams.hotelId}`}
+        fallback={<RoomsContainerSkeleton />}
+      >
         <RoomsContainer
           hotelId={hotelId}
           lang={params.lang}