Merged in fix/destinationpages-loading-tweaks (pull request #1605)

Suspense destination pages fixes and some performance improvements

* Suspense destination pages fixes and some performance improvements


Approved-by: Erik Tiekstra

apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -1,5 +1,6 @@
 import { headers } from "next/headers"
 import { notFound, redirect } from "next/navigation"
+import { Suspense } from "react"
 
 import { overview } from "@/constants/routes/myPages"
 import { isSignupPage } from "@/constants/routes/signup"
@@ -8,7 +9,9 @@ import { getHotelPage } from "@/lib/trpc/memoizedRequests"
 
 import { auth } from "@/auth"
 import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
+import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
 import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
+import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
 import DestinationOverviewPage from "@/components/ContentType/DestinationPage/DestinationOverviewPage"
 import HotelPage from "@/components/ContentType/HotelPage"
 import HotelSubpage from "@/components/ContentType/HotelSubpage"
@@ -62,9 +65,17 @@ export default async function ContentTypePage({
     case PageContentTypeEnum.destinationOverviewPage:
       return <DestinationOverviewPage />
     case PageContentTypeEnum.destinationCountryPage:
-      return <DestinationCountryPage />
+      return (
+        <Suspense fallback={<DestinationCountryPageSkeleton />}>
+          <DestinationCountryPage />
+        </Suspense>
+      )
     case PageContentTypeEnum.destinationCityPage:
-      return <DestinationCityPage />
+      return (
+        <Suspense fallback={<DestinationCityPageSkeleton />}>
+          <DestinationCityPage />
+        </Suspense>
+      )
     case PageContentTypeEnum.hotelPage:
       if (env.HIDE_FOR_NEXT_RELEASE) {
         return notFound()

apps/scandic-web/components/Blocks/JoinScandicFriends/index.tsx

@@ -1,5 +1,4 @@
-import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-
+import { auth } from "@/auth"
 import { SurpriseIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
@@ -7,6 +6,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { isValidSession } from "@/utils/session"
 
 import styles from "./joinScandicFriends.module.css"
 
@@ -19,8 +19,9 @@ interface JoinScandicFriendsProps {
 export default async function JoinScandicFriends({
   content,
 }: JoinScandicFriendsProps) {
-  const session = await getProfileSafely()
-  if (session) {
+  const session = await auth()
+  const isLoggedIn = isValidSession(session)
+  if (isLoggedIn) {
     return null
   }
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -6,6 +6,7 @@ import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
 
 import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 
 import ExperienceList from "../ExperienceList"
 import HotelDataContainer, { preload } from "../HotelDataContainer"
@@ -49,7 +50,11 @@ export default async function DestinationCityPage() {
         <HotelDataContainer cityIdentifier={cityIdentifier}>
           <div className={styles.pageContainer}>
             <header className={styles.header}>
-              <Breadcrumbs variant={PageContentTypeEnum.destinationCityPage} />
+              <Suspense fallback={<BreadcrumbsSkeleton />}>
+                <Breadcrumbs
+                  variant={PageContentTypeEnum.destinationCityPage}
+                />
+              </Suspense>
               {images?.length && (
                 <TopImages images={images} destinationName={city.name} />
               )}

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
 import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
@@ -23,7 +24,7 @@ export default async function DestinationCountryPage() {
   const pageData = await getDestinationCountryPage()
 
   if (!pageData) {
-    return null
+    return notFound()
   }
 
   const { tracking, destinationCountryPage, translatedCountry } = pageData

apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx

@@ -51,6 +51,7 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
                   ? setLightboxState({ open: true, activeIndex: index })
                   : null
               }
+              priority
             />
           )
         })}