Suspense on <TrackingSDK>

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
@@ -36,7 +38,9 @@ export default async function MyPages({
           <p>{intl.formatMessage({ id: "No content published" })}</p>
         )}
       </main>
-      <TrackingSDK pageData={tracking} />
+      <Suspense fallback={null}>
+        <TrackingSDK pageData={tracking} />
+      </Suspense>
     </>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx

@@ -1,4 +1,5 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import { Suspense } from "react"
 
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
@@ -73,10 +74,13 @@ export default async function BookingConfirmationPage({
 
   return (
     <>
-      <TrackingSDK
+      <Suspense fallback={null}>
-        pageData={initialPageTrackingData}
+        <TrackingSDK
-        hotelInfo={initialHotelsTrackingData}
+          pageData={initialPageTrackingData}
-      />
+          hotelInfo={initialHotelsTrackingData}
+        />
+      </Suspense>
+
       <BookingConfirmation
         bookingConfirmationPromise={bookingConfirmationPromise}
       />

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

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 
@@ -32,7 +34,9 @@ export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
   return (
     <div className={styles.page}>
       New booking flow! Please report errors/issues in Slack.
-      <TrackingSDK pageData={pageTrackingData} />
+      <Suspense fallback={null}>
+        <TrackingSDK pageData={pageTrackingData} />
+      </Suspense>
     </div>
   )
 }

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

@@ -1,5 +1,6 @@
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
@@ -113,7 +114,12 @@ export default async function SelectHotelMapPage({
         filterList={filterList}
         cityCoordinates={cityCoordinates}
       />
-      <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
+      <Suspense fallback={null}>
+        <TrackingSDK
+          pageData={pageTrackingData}
+          hotelInfo={hotelsTrackingData}
+        />
+      </Suspense>
     </MapModal>
   )
 }

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

@@ -223,10 +223,12 @@ export default async function SelectHotelPage({
           )}
           <HotelCardListing hotelData={validHotels} />
         </div>
-        <TrackingSDK
+        <Suspense fallback={null}>
-          pageData={pageTrackingData}
+          <TrackingSDK
-          hotelInfo={hotelsTrackingData}
+            pageData={pageTrackingData}
-        />
+            hotelInfo={hotelsTrackingData}
+          />
+        </Suspense>
       </main>
     </>
   )

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

@@ -30,17 +30,17 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  const locations = await getLocations()
+  // const locations = await getLocations()
-  if (!locations || "error" in locations) {
+  // if (!locations || "error" in locations) {
-    return null
+  //   return null
-  }
+  // }
-  const hotel = locations.data.find(
+  // const hotel = locations.data.find(
-    (location) =>
+  //   (location) =>
-      "operaId" in location && location.operaId == searchParams.hotel
+  //     "operaId" in location && location.operaId == searchParams.hotel
-  )
+  // )
-  if (!hotel) {
+  // if (!hotel) {
-    return notFound()
+  //   return notFound()
-  }
+  // }
   const selectRoomParams = new URLSearchParams(searchParams)
   const selectRoomParamsObject =
     getHotelReservationQueryParams(selectRoomParams)
@@ -101,6 +101,7 @@ export default async function SelectRatePage({
   }
 
   const hotelId = +searchParams.hotel
+
   return (
     <>
       <HotelInfoCard
@@ -122,7 +123,12 @@ export default async function SelectRatePage({
           childArray={children}
         />
       </Suspense>
-      <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
+      <Suspense fallback={null}>
+        <TrackingSDK
+          pageData={pageTrackingData}
+          hotelInfo={hotelsTrackingData}
+        />
+      </Suspense>
     </>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx

@@ -46,7 +46,6 @@ export default function EnterDetailsTracking(props: Props) {
     roomRate,
     packages,
   } = useEnterDetailsStore((state) => state)
-  const { getPageLoadTime, hasRun } = useTrackingStore()
   const pathName = usePathname()
   const sessionId = useSessionId()
 
@@ -95,11 +94,11 @@ export default function EnterDetailsTracking(props: Props) {
       ...pageTrackingData,
       sessionId,
       pathName,
-      pageLoadTime: getPageLoadTime(),
+      pageLoadTime: 0, // Yes, this is instant
     }
     const pageObject = createSDKPageObject(trackingData)
     return pageObject
-  }, [currentStep, getPageLoadTime, lang, pathName, sessionId])
+  }, [currentStep, lang, pathName, sessionId])
 
   const hotelDetailsData = useMemo(() => {
     const isMember = true
@@ -144,23 +143,23 @@ export default function EnterDetailsTracking(props: Props) {
       return
     }
 
-    if (previousPathname.current !== pathName) {
+    //if (previousPathname.current !== pathName) {
-      console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
+    console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
-      console.log(
+    console.log(
-        "TRACKING: Tracking RouterTransition userData",
+      "TRACKING: Tracking RouterTransition userData",
-        userTrackingData
+      userTrackingData
-      )
+    )
-      console.log(
+    console.log(
-        "TRACKING: Tracking RouterTransition hotelInfo",
+      "TRACKING: Tracking RouterTransition hotelInfo",
-        hotelDetailsData
+      hotelDetailsData
-      )
+    )
-      window.adobeDataLayer.push({
+    window.adobeDataLayer.push({
-        event: "pageView",
+      event: "pageView",
-        pageInfo: pageObject,
+      pageInfo: pageObject,
-        userInfo: userTrackingData,
+      userInfo: userTrackingData,
-        hotelInfo: hotelDetailsData,
+      hotelInfo: hotelDetailsData,
-      })
+    })
-    }
+    //}
     previousPathname.current = pathName // Update for next render
   }, [userTrackingData, pageObject, hotelDetailsData, pathName])
 

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx

@@ -285,10 +285,12 @@ export default async function StepPage({
         cancellationRule={roomAvailability.cancellationText}
         lang={lang}
       />
-      <TrackingSDK
+      <Suspense fallback={null}>
-        pageData={initialPageTrackingData}
+        <TrackingSDK
-        hotelInfo={initialHotelsTrackingData}
+          pageData={initialPageTrackingData}
-      />
+          hotelInfo={initialHotelsTrackingData}
+        />
+      </Suspense>
     </EnterDetailsProvider>
   )
 }

components/ContentType/LoyaltyPage/index.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
@@ -45,8 +47,9 @@ export default async function LoyaltyPage() {
           ) : null}
         </MaxWidth>
       </section>
-
+      <Suspense fallback={null}>
-      <TrackingSDK pageData={tracking} />
+        <TrackingSDK pageData={tracking} />
+      </Suspense>
     </>
   )
 }

components/ContentType/StaticPages/index.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import Blocks from "@/components/Blocks"
 import Hero from "@/components/Hero"
 import Sidebar from "@/components/Sidebar"
@@ -58,8 +60,9 @@ export default function StaticPage({
           ) : null}
         </div>
       </section>
-
+      <Suspense fallback={null}>
-      <TrackingSDK pageData={tracking} />
+        <TrackingSDK pageData={tracking} />
+      </Suspense>
     </>
   )
 }

components/Webviews/AccountPage/index.tsx

@@ -1,6 +1,8 @@
 import "@/app/globals.css"
 import "@scandic-hotels/design-system/style.css"
 
+import { Suspense } from "react"
+
 import { overview } from "@/constants/routes/webviews"
 import { serverClient } from "@/lib/trpc/server"
 
@@ -31,7 +33,9 @@ export default async function AccountPage() {
         <Blocks content={accountPage.content} />
       </MaxWidth>
 
-      <TrackingSDK pageData={tracking} />
+      <Suspense fallback={null}>
+        <TrackingSDK pageData={tracking} />
+      </Suspense>
     </>
   )
 }

components/Webviews/LoyaltyPage/index.tsx

@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import MaxWidth from "@/components/MaxWidth"
@@ -27,7 +29,9 @@ export default async function AboutScandicFriends() {
         </MaxWidth>
       </section>
 
-      <TrackingSDK pageData={tracking} />
+      <Suspense fallback={null}>
+        <TrackingSDK pageData={tracking} />
+      </Suspense>
     </>
   )
 }