Merged in fix/suspense-key (pull request #1356)

feat: suspense key - use json-stable-stringify for suspense key

* feat: suspense key - use json-stable-stringify for suspense key


Approved-by: Joakim Jäderberg

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

@@ -1,3 +1,4 @@
+import stringify from "json-stable-stringify-without-jsonify"
 import { Suspense } from "react"
 
 import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
@@ -16,11 +17,13 @@ export default async function SelectHotelMapPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
+  const suspenseKey = stringify(searchParams)
+
   return (
     <div className={styles.main}>
       <MapContainer>
         <Suspense
-          key={JSON.stringify(searchParams)}
+          key={suspenseKey}
           fallback={<SelectHotelMapContainerSkeleton />}
         >
           <SelectHotelMapContainer searchParams={searchParams} />

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

@@ -1,3 +1,4 @@
+import stringify from "json-stable-stringify-without-jsonify"
 import { Suspense } from "react"
 
 import SelectHotel from "@/components/HotelReservation/SelectHotel"
@@ -13,11 +14,10 @@ export default async function SelectHotelPage({
 }: PageArgs<LangParams, SelectHotelSearchParams>) {
   setLang(params.lang)
 
+  const suspenseKey = stringify(searchParams)
+
   return (
-    <Suspense
+    <Suspense key={suspenseKey} fallback={<SelectHotelSkeleton />}>
-      key={JSON.stringify(searchParams)}
-      fallback={<SelectHotelSkeleton />}
-    >
       <SelectHotel params={params} searchParams={searchParams} />
     </Suspense>
   )

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

@@ -1,4 +1,5 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
@@ -96,17 +97,14 @@ export default async function SelectRatePage({
   const hotelId = +hotel.id
 
   const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
-
+  const suspenseKey = stringify(searchParams)
   return (
     <>
       <Suspense fallback={<HotelInfoCardSkeleton />}>
         <HotelInfoCard hotelData={hotelData} />
       </Suspense>
 
-      <Suspense
+      <Suspense key={suspenseKey} fallback={<RoomsContainerSkeleton />}>
-        key={JSON.stringify(searchParams)}
-        fallback={<RoomsContainerSkeleton />}
-      >
         <RoomsContainer
           adultArray={adultsInRoom}
           booking={booking}
@@ -117,7 +115,7 @@ export default async function SelectRatePage({
           toDate={departureDate}
         />
       </Suspense>
-      <Suspense fallback={null}>
+      <Suspense key={suspenseKey} fallback={null}>
         <TrackingSDK
           pageData={pageTrackingData}
           hotelInfo={hotelsTrackingData}