From 1116bdafa88787d8c7704e360f54784e6ea6cdce Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 17 Feb 2025 09:42:54 +0000
Subject: [PATCH] Merged in fix/suspense-key (pull request #1356)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../(standard)/select-hotel/map/page.tsx               |  5 ++++-
 .../hotelreservation/(standard)/select-hotel/page.tsx  |  8 ++++----
 .../hotelreservation/(standard)/select-rate/page.tsx   | 10 ++++------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
index c5383562c..194814e42 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/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} />
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 065533eba..0d611b429 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/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
-      key={JSON.stringify(searchParams)}
-      fallback={<SelectHotelSkeleton />}
-    >
+    <Suspense key={suspenseKey} fallback={<SelectHotelSkeleton />}>
       <SelectHotel params={params} searchParams={searchParams} />
     </Suspense>
   )
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
index fb352f05c..f1941fbea 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/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
-        key={JSON.stringify(searchParams)}
-        fallback={<RoomsContainerSkeleton />}
-      >
+      <Suspense key={suspenseKey} 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}