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
-      key={JSON.stringify(searchParams)}
-      fallback={<SelectHotelSkeleton />}
-    >
+    <Suspense key={suspenseKey} fallback={<SelectHotelSkeleton />}>
       <SelectHotel params={params} searchParams={searchParams} />
     </Suspense>
   )