From 1a921940e835b748cb709c43032d77f9647475a5 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 10:59:34 +0200
Subject: [PATCH 01/10] feat: #sw-694 using suspense when loading dynamic
 content and breadcrumbs

---
 .../my-pages/@breadcrumbs/[...path]/page.tsx  |   8 +-
 .../[contentType]/[uid]/@breadcrumbs/page.tsx |   8 +-
 .../(public)/[contentType]/[uid]/page.tsx     |   2 +-
 .../DynamicContent/OverviewTable/index.tsx    |   7 +-
 components/Blocks/DynamicContent/index.tsx    | 106 ++++++++++--------
 5 files changed, 79 insertions(+), 52 deletions(-)

diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
index a5b818f77..85f346971 100644
--- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { setLang } from "@/i18n/serverContext"
 
@@ -6,5 +8,9 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  return <Breadcrumbs />
+  return (
+    <Suspense>
+      <Breadcrumbs />
+    </Suspense>
+  )
 }
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
index 4119f48e3..1e6dc2277 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import Breadcrumbs from "@/components/Breadcrumbs"
 import { setLang } from "@/i18n/serverContext"
 
@@ -6,5 +8,9 @@ import { LangParams, PageArgs } from "@/types/params"
 export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  return <Breadcrumbs />
+  return (
+    <Suspense>
+      <Breadcrumbs />
+    </Suspense>
+  )
 }
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
index cbb83a9dc..08fa09422 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx
@@ -16,7 +16,7 @@ import {
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default async function ContentTypePage({
+export default function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   setLang(params.lang)
diff --git a/components/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Blocks/DynamicContent/OverviewTable/index.tsx
index 866a0c7d6..e5c23b370 100644
--- a/components/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/index.tsx
@@ -9,8 +9,11 @@ export default async function OverviewTable({
   dynamic_content,
   firstItem,
 }: OverviewTableProps) {
-  const levels = await serverClient().contentstack.rewards.all()
-  const membershipLevel = await serverClient().user.safeMembershipLevel()
+  const [levels, membershipLevel] = await Promise.all([
+    serverClient().contentstack.rewards.all(),
+    serverClient().user.safeMembershipLevel(),
+  ])
+
   return (
     <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
       <OverviewTableClient
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index 21b2616ac..c0777de16 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { env } from "@/env/server"
 
 import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
@@ -14,58 +16,68 @@ import SignUpVerification from "@/components/Blocks/DynamicContent/SignUpVerific
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
 import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
+import LoadingSpinner from "@/components/LoadingSpinner"
 
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
 
-export default async function DynamicContent({
+export default function DynamicContent({
   dynamic_content,
   firstItem,
 }: DynamicContentProps) {
-  switch (dynamic_content.component) {
-    case DynamicContentEnum.Blocks.components.current_benefits:
-      return <CurrentRewardsBlock {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.earn_and_burn:
-      return <EarnAndBurn {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.expiring_points:
-      return env.HIDE_FOR_NEXT_RELEASE ? null : (
-        <ExpiringPoints {...dynamic_content} />
-      )
-    case DynamicContentEnum.Blocks.components.how_it_works:
-      return (
-        <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
-      )
-    case DynamicContentEnum.Blocks.components.loyalty_levels:
-      return (
-        <LoyaltyLevels
-          dynamic_content={dynamic_content}
-          firstItem={firstItem}
-        />
-      )
-    case DynamicContentEnum.Blocks.components.membership_overview:
-      return <Overview {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.next_benefits:
-      return <NextLevelRewardsBlock {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.overview_table:
-      return (
-        <OverviewTable
-          dynamic_content={dynamic_content}
-          firstItem={firstItem}
-        />
-      )
-    case DynamicContentEnum.Blocks.components.points_overview:
-      return <PointsOverview {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.previous_stays:
-      return <PreviousStays {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.sign_up_form:
-      return <SignupFormWrapper dynamic_content={dynamic_content} />
-    case DynamicContentEnum.Blocks.components.sign_up_verification:
-      return <SignUpVerification dynamic_content={dynamic_content} />
-    case DynamicContentEnum.Blocks.components.soonest_stays:
-      return <SoonestStays {...dynamic_content} />
-    case DynamicContentEnum.Blocks.components.upcoming_stays:
-      return <UpcomingStays {...dynamic_content} />
-    default:
-      return null
-  }
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      {(() => {
+        switch (dynamic_content.component) {
+          case DynamicContentEnum.Blocks.components.current_benefits:
+            return <CurrentRewardsBlock {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.earn_and_burn:
+            return <EarnAndBurn {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.expiring_points:
+            return env.HIDE_FOR_NEXT_RELEASE ? null : (
+              <ExpiringPoints {...dynamic_content} />
+            )
+          case DynamicContentEnum.Blocks.components.how_it_works:
+            return (
+              <HowItWorks
+                dynamic_content={dynamic_content}
+                firstItem={firstItem}
+              />
+            )
+          case DynamicContentEnum.Blocks.components.loyalty_levels:
+            return (
+              <LoyaltyLevels
+                dynamic_content={dynamic_content}
+                firstItem={firstItem}
+              />
+            )
+          case DynamicContentEnum.Blocks.components.membership_overview:
+            return <Overview {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.next_benefits:
+            return <NextLevelRewardsBlock {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.overview_table:
+            return (
+              <OverviewTable
+                dynamic_content={dynamic_content}
+                firstItem={firstItem}
+              />
+            )
+          case DynamicContentEnum.Blocks.components.points_overview:
+            return <PointsOverview {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.previous_stays:
+            return <PreviousStays {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.sign_up_form:
+            return <SignupFormWrapper dynamic_content={dynamic_content} />
+          case DynamicContentEnum.Blocks.components.sign_up_verification:
+            return <SignUpVerification dynamic_content={dynamic_content} />
+          case DynamicContentEnum.Blocks.components.soonest_stays:
+            return <SoonestStays {...dynamic_content} />
+          case DynamicContentEnum.Blocks.components.upcoming_stays:
+            return <UpcomingStays {...dynamic_content} />
+          default:
+            return null
+        }
+      })()}
+    </Suspense>
+  )
 }

From 9f813bebfe5c6a2bf7f2d21340879b1dfaa18cb8 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 11:48:20 +0200
Subject: [PATCH 02/10] Refactor and built a breadcrums skeleton

---
 .../my-pages/@breadcrumbs/[...path]/page.tsx  |   3 +-
 .../[contentType]/[uid]/@breadcrumbs/page.tsx |   3 +-
 components/Blocks/DynamicContent/index.tsx    | 104 +++++++++---------
 .../Breadcrumbs/BreadcrumbsSkeleton.tsx       |  31 ++++++
 4 files changed, 88 insertions(+), 53 deletions(-)
 create mode 100644 components/Breadcrumbs/BreadcrumbsSkeleton.tsx

diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
index 85f346971..6775fd188 100644
--- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
@@ -1,6 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -9,7 +10,7 @@ export default function AllBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
   return (
-    <Suspense>
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
       <Breadcrumbs />
     </Suspense>
   )
diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
index 1e6dc2277..ec8f14553 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
+++ b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
@@ -1,6 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
@@ -9,7 +10,7 @@ export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
 
   return (
-    <Suspense>
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
       <Breadcrumbs />
     </Suspense>
   )
diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index c0777de16..bf816e3a8 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -27,57 +27,59 @@ export default function DynamicContent({
 }: DynamicContentProps) {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      {(() => {
-        switch (dynamic_content.component) {
-          case DynamicContentEnum.Blocks.components.current_benefits:
-            return <CurrentRewardsBlock {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.earn_and_burn:
-            return <EarnAndBurn {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.expiring_points:
-            return env.HIDE_FOR_NEXT_RELEASE ? null : (
-              <ExpiringPoints {...dynamic_content} />
-            )
-          case DynamicContentEnum.Blocks.components.how_it_works:
-            return (
-              <HowItWorks
-                dynamic_content={dynamic_content}
-                firstItem={firstItem}
-              />
-            )
-          case DynamicContentEnum.Blocks.components.loyalty_levels:
-            return (
-              <LoyaltyLevels
-                dynamic_content={dynamic_content}
-                firstItem={firstItem}
-              />
-            )
-          case DynamicContentEnum.Blocks.components.membership_overview:
-            return <Overview {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.next_benefits:
-            return <NextLevelRewardsBlock {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.overview_table:
-            return (
-              <OverviewTable
-                dynamic_content={dynamic_content}
-                firstItem={firstItem}
-              />
-            )
-          case DynamicContentEnum.Blocks.components.points_overview:
-            return <PointsOverview {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.previous_stays:
-            return <PreviousStays {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.sign_up_form:
-            return <SignupFormWrapper dynamic_content={dynamic_content} />
-          case DynamicContentEnum.Blocks.components.sign_up_verification:
-            return <SignUpVerification dynamic_content={dynamic_content} />
-          case DynamicContentEnum.Blocks.components.soonest_stays:
-            return <SoonestStays {...dynamic_content} />
-          case DynamicContentEnum.Blocks.components.upcoming_stays:
-            return <UpcomingStays {...dynamic_content} />
-          default:
-            return null
-        }
-      })()}
+      {renderDynamicComponent(dynamic_content, firstItem)}
     </Suspense>
   )
 }
+
+function renderDynamicComponent(
+  dynamic_content: DynamicContentProps["dynamic_content"],
+  firstItem: DynamicContentProps["firstItem"]
+) {
+  switch (dynamic_content.component) {
+    case DynamicContentEnum.Blocks.components.current_benefits:
+      return <CurrentRewardsBlock {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.earn_and_burn:
+      return <EarnAndBurn {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.expiring_points:
+      return env.HIDE_FOR_NEXT_RELEASE ? null : (
+        <ExpiringPoints {...dynamic_content} />
+      )
+    case DynamicContentEnum.Blocks.components.how_it_works:
+      return (
+        <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
+      )
+    case DynamicContentEnum.Blocks.components.loyalty_levels:
+      return (
+        <LoyaltyLevels
+          dynamic_content={dynamic_content}
+          firstItem={firstItem}
+        />
+      )
+    case DynamicContentEnum.Blocks.components.membership_overview:
+      return <Overview {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.next_benefits:
+      return <NextLevelRewardsBlock {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.overview_table:
+      return (
+        <OverviewTable
+          dynamic_content={dynamic_content}
+          firstItem={firstItem}
+        />
+      )
+    case DynamicContentEnum.Blocks.components.points_overview:
+      return <PointsOverview {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.previous_stays:
+      return <PreviousStays {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_form:
+      return <SignupFormWrapper dynamic_content={dynamic_content} />
+    case DynamicContentEnum.Blocks.components.sign_up_verification:
+      return <SignUpVerification dynamic_content={dynamic_content} />
+    case DynamicContentEnum.Blocks.components.soonest_stays:
+      return <SoonestStays {...dynamic_content} />
+    case DynamicContentEnum.Blocks.components.upcoming_stays:
+      return <UpcomingStays {...dynamic_content} />
+    default:
+      return null
+  }
+}
diff --git a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
new file mode 100644
index 000000000..31b3b8ec6
--- /dev/null
+++ b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
@@ -0,0 +1,31 @@
+import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./breadcrumbs.module.css"
+
+export default function BreadcrumbsSkeleton() {
+  return (
+    <nav className={styles.breadcrumbs}>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <Link
+            className={styles.homeLink}
+            color="peach80"
+            href={""}
+            variant="breadcrumb"
+          >
+            <HouseIcon color="peach80" />
+          </Link>
+          <ChevronRightIcon aria-hidden="true" color="peach80" />
+        </li>
+
+        <li className={styles.listItem}>
+          <Footnote color="burgundy" type="bold">
+            ...
+          </Footnote>
+        </li>
+      </ul>
+    </nav>
+  )
+}

From 83a88f33a72576193632f5500992413af7940535 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 13:10:08 +0200
Subject: [PATCH 03/10] Suspense on Sidebar

---
 app/[lang]/(live)/(protected)/my-pages/layout.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
index f5b84dbd7..4f6054b45 100644
--- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx
@@ -1,3 +1,6 @@
+import { Suspense } from "react"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
 import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./layout.module.css"
@@ -13,7 +16,9 @@ export default async function MyPagesLayout({
       <section className={styles.layout}>
         {breadcrumbs}
         <section className={styles.content}>
-          <Sidebar />
+          <Suspense fallback={<LoadingSpinner />}>
+            <Sidebar />
+          </Suspense>
           {children}
         </section>
       </section>

From 69566c5cdf0386efb3b25e8aa998c00d04876cd6 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 13:39:10 +0200
Subject: [PATCH 04/10] Using span instead of Link

---
 components/Breadcrumbs/BreadcrumbsSkeleton.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
index 31b3b8ec6..6841c2dba 100644
--- a/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
+++ b/components/Breadcrumbs/BreadcrumbsSkeleton.tsx
@@ -1,5 +1,4 @@
 import { ChevronRightIcon, HouseIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import styles from "./breadcrumbs.module.css"
@@ -9,14 +8,9 @@ export default function BreadcrumbsSkeleton() {
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>
         <li className={styles.listItem}>
-          <Link
-            className={styles.homeLink}
-            color="peach80"
-            href={""}
-            variant="breadcrumb"
-          >
+          <span className={styles.homeLink} color="peach80">
             <HouseIcon color="peach80" />
-          </Link>
+          </span>
           <ChevronRightIcon aria-hidden="true" color="peach80" />
         </li>
 

From 4a8d38912ffd6f9f4059dbd898062dbdc1e7887b Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 15:02:28 +0200
Subject: [PATCH 05/10] Loading.tsx for webviews and suspense for footer

---
 app/[lang]/webview/loading.tsx |  5 +++++
 components/Footer/index.tsx    | 12 ++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 app/[lang]/webview/loading.tsx

diff --git a/app/[lang]/webview/loading.tsx b/app/[lang]/webview/loading.tsx
new file mode 100644
index 000000000..c739b6635
--- /dev/null
+++ b/app/[lang]/webview/loading.tsx
@@ -0,0 +1,5 @@
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+export default function Loading() {
+  return <LoadingSpinner />
+}
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 789630982..844de1b8f 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from "react"
+
 import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import FooterDetails from "./Details"
@@ -10,9 +12,11 @@ export function preload() {
 
 export default function Footer() {
   return (
-    <footer>
-      <FooterNavigation />
-      <FooterDetails />
-    </footer>
+    <Suspense>
+      <footer>
+        <FooterNavigation />
+        <FooterDetails />
+      </footer>
+    </Suspense>
   )
 }

From 687a110a39157b3450490684ee7c70d174746a84 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 25 Oct 2024 15:33:06 +0200
Subject: [PATCH 06/10] Utilizing memoized requests

---
 actions/editProfile.ts                        |   4 +-
 .../profile/@membershipCards/page.tsx         |   4 +-
 .../DynamicContent/OverviewTable/index.tsx    |   3 +-
 .../Points/ExpiringPoints/index.tsx           |   4 +-
 .../Rewards/NextLevel/index.tsx               |   3 +-
 components/Current/Header/TopMenu/index.tsx   |   4 +-
 components/Current/Header/index.tsx           |   4 +-
 .../MainMenu/MyPagesMenuWrapper/index.tsx     |   5 +-
 components/Sidebar/JoinLoyalty/index.tsx      |   6 +-
 components/Sidebar/MyPagesNavigation.tsx      |   6 +-
 components/TrackingSDK/index.tsx              |   5 +-
 lib/trpc/memoizedRequests/index.ts            |  26 ++++
 server/routers/user/query.ts                  | 140 +++++++++---------
 13 files changed, 123 insertions(+), 91 deletions(-)

diff --git a/actions/editProfile.ts b/actions/editProfile.ts
index 010772c4a..8f0791c48 100644
--- a/actions/editProfile.ts
+++ b/actions/editProfile.ts
@@ -4,7 +4,7 @@ import { z } from "zod"
 
 import { ApiLang } from "@/constants/languages"
 import * as api from "@/lib/api"
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 import { protectedServerActionProcedure } from "@/server/trpc"
 
 import { editProfileSchema } from "@/components/Forms/Edit/Profile/schema"
@@ -68,7 +68,7 @@ export const editProfile = protectedServerActionProcedure
       }
     }
 
-    const profile = await serverClient().user.get()
+    const profile = await getProfile()
     if (!profile || "error" in profile) {
       console.error(
         "editProfile profile fetch error",
diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
index 226a33860..693bdc171 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@membershipCards/page.tsx
@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getMembershipCards } from "@/lib/trpc/memoizedRequests"
 
 import { PlusCircleIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
@@ -16,7 +16,7 @@ export default async function MembershipCardSlot({
 }: PageArgs<LangParams>) {
   setLang(params.lang)
   const { formatMessage } = await getIntl()
-  const membershipCards = await serverClient().user.membershipCards()
+  const membershipCards = await getMembershipCards()
 
   return (
     <section className={styles.container}>
diff --git a/components/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Blocks/DynamicContent/OverviewTable/index.tsx
index e5c23b370..f39fb9a25 100644
--- a/components/Blocks/DynamicContent/OverviewTable/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/index.tsx
@@ -1,3 +1,4 @@
+import { getMembershipLevelSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionWrapper from "../SectionWrapper"
@@ -11,7 +12,7 @@ export default async function OverviewTable({
 }: OverviewTableProps) {
   const [levels, membershipLevel] = await Promise.all([
     serverClient().contentstack.rewards.all(),
-    serverClient().user.safeMembershipLevel(),
+    getMembershipLevelSafely(),
   ])
 
   return (
diff --git a/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx b/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx
index ebfa71d28..8b0206351 100644
--- a/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx
+++ b/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx
@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
@@ -12,7 +12,7 @@ export default async function ExpiringPoints({
   subtitle,
   title,
 }: AccountPageComponentProps) {
-  const membershipLevel = await serverClient().user.membershipLevel()
+  const membershipLevel = await getMembershipLevel()
 
   if (!membershipLevel?.pointsToExpire || !membershipLevel?.pointsExpiryDate) {
     return null
diff --git a/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx b/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
index cf86c6aa1..7517ed955 100644
--- a/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
@@ -1,6 +1,7 @@
 import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
+import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import SectionContainer from "@/components/Section/Container"
@@ -22,7 +23,7 @@ export default async function NextLevelRewardsBlock({
   link,
 }: AccountPageComponentProps) {
   const intl = await getIntl()
-  const membershipLevel = await serverClient().user.membershipLevel()
+  const membershipLevel = await getMembershipLevel()
 
   if (!membershipLevel || !membershipLevel?.nextLevel) {
     return null
diff --git a/components/Current/Header/TopMenu/index.tsx b/components/Current/Header/TopMenu/index.tsx
index dcce0b333..1472461d8 100644
--- a/components/Current/Header/TopMenu/index.tsx
+++ b/components/Current/Header/TopMenu/index.tsx
@@ -1,6 +1,6 @@
 import { logout } from "@/constants/routes/handleAuth"
 import { overview } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
+import { getName } from "@/lib/trpc/memoizedRequests"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
@@ -23,7 +23,7 @@ export default async function TopMenu({
   languageSwitcher,
 }: TopMenuProps) {
   const { formatMessage } = await getIntl()
-  const user = await serverClient().user.name()
+  const user = await getName()
   return (
     <div className={styles.topMenu}>
       <div className={styles.container}>
diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx
index 2b376c778..59b5e479b 100644
--- a/components/Current/Header/index.tsx
+++ b/components/Current/Header/index.tsx
@@ -1,6 +1,6 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
-import { getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
+import { getLanguageSwitcher, getName } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
@@ -18,7 +18,7 @@ export default async function Header() {
     serverClient().contentstack.base.currentHeader({
       lang: getLang(),
     }),
-    serverClient().user.name(),
+    getName(),
     getLanguageSwitcher(),
     serverClient().contentstack.myPages.navigation.get(),
   ])
diff --git a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
index eacb037c6..0f5a8ef0e 100644
--- a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
@@ -1,5 +1,6 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { myPages } from "@/constants/routes/myPages"
+import { getMembershipLevelSafely, getName } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
@@ -17,8 +18,8 @@ export default async function MyPagesMenuWrapper() {
   const [intl, myPagesNavigation, user, membership] = await Promise.all([
     getIntl(),
     serverClient().contentstack.myPages.navigation.get(),
-    serverClient().user.name(),
-    serverClient().user.safeMembershipLevel(),
+    getName(),
+    getMembershipLevelSafely(),
   ])
 
   const membershipLevel = membership?.membershipLevel
diff --git a/components/Sidebar/JoinLoyalty/index.tsx b/components/Sidebar/JoinLoyalty/index.tsx
index ae5f582d5..31465ae78 100644
--- a/components/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Sidebar/JoinLoyalty/index.tsx
@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getName } from "@/lib/trpc/memoizedRequests"
 
 import LoginButton from "@/components/Current/Header/LoginButton"
 import ArrowRight from "@/components/Icons/ArrowRight"
@@ -19,10 +19,10 @@ export default async function JoinLoyaltyContact({
   block,
 }: JoinLoyaltyContactProps) {
   const intl = await getIntl()
-  const user = await serverClient().user.name()
+  const username = await getName()
 
   // Check if we have user, that means we are logged in.
-  if (user) {
+  if (username) {
     return null
   }
   return (
diff --git a/components/Sidebar/MyPagesNavigation.tsx b/components/Sidebar/MyPagesNavigation.tsx
index 23f60e144..62d62cb82 100644
--- a/components/Sidebar/MyPagesNavigation.tsx
+++ b/components/Sidebar/MyPagesNavigation.tsx
@@ -1,12 +1,12 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getName } from "@/lib/trpc/memoizedRequests"
 
 import MyPagesSidebar from "@/components/MyPages/Sidebar"
 
 export default async function MyPagesNavigation() {
-  const user = await serverClient().user.name()
+  const username = await getName()
 
   // Check if we have user, that means we are logged in andt the My Pages menu can show.
-  if (!user) {
+  if (!username) {
     return null
   }
   return <MyPagesSidebar />
diff --git a/components/TrackingSDK/index.tsx b/components/TrackingSDK/index.tsx
index d267341b6..05fd93d9c 100644
--- a/components/TrackingSDK/index.tsx
+++ b/components/TrackingSDK/index.tsx
@@ -1,3 +1,4 @@
+import { getUserTracking } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import RouterTransition from "@/components/TrackingSDK/RouterTransition"
@@ -7,7 +8,7 @@ import TrackingSDKClient from "./Client"
 import { TrackingSDKPageData } from "@/types/components/tracking"
 
 export const preloadUserTracking = () => {
-  void serverClient().user.tracking()
+  void getUserTracking()
 }
 
 export default async function TrackingSDK({
@@ -15,7 +16,7 @@ export default async function TrackingSDK({
 }: {
   pageData: TrackingSDKPageData
 }) {
-  const userTrackingData = await serverClient().user.tracking()
+  const userTrackingData = await getUserTracking()
 
   return (
     <>
diff --git a/lib/trpc/memoizedRequests/index.ts b/lib/trpc/memoizedRequests/index.ts
index 471d20def..2bf70a9e9 100644
--- a/lib/trpc/memoizedRequests/index.ts
+++ b/lib/trpc/memoizedRequests/index.ts
@@ -22,6 +22,32 @@ export const getCreditCardsSafely = cache(
   }
 )
 
+export const getMembershipLevel = cache(
+  async function getMemoizedMembershipLevel() {
+    return serverClient().user.membershipLevel()
+  }
+)
+
+export const getMembershipLevelSafely = cache(
+  async function getMemoizedMembershipLevelSafely() {
+    return serverClient().user.safeMembershipLevel()
+  }
+)
+
+export const getMembershipCards = cache(
+  async function getMemoizedMembershipCards() {
+    return serverClient().user.membershipCards()
+  }
+)
+
+export const getName = cache(async function getMemoizedName() {
+  return serverClient().user.name()
+})
+
+export const getUserTracking = cache(async function getMemoizedUserTracking() {
+  return serverClient().user.tracking()
+})
+
 export const getHotelData = cache(async function getMemoizedHotelData(
   hotelId: string,
   language: string
diff --git a/server/routers/user/query.ts b/server/routers/user/query.ts
index 5b823c68d..224f03198 100644
--- a/server/routers/user/query.ts
+++ b/server/routers/user/query.ts
@@ -1,4 +1,5 @@
 import { metrics } from "@opentelemetry/api"
+import { cache } from "react"
 
 import * as api from "@/lib/api"
 import {
@@ -80,86 +81,87 @@ const getCreditCardsFailCounter = meter.createCounter(
   "trpc.user.creditCards-fail"
 )
 
-export async function getVerifiedUser({ session }: { session: Session }) {
-  const now = Date.now()
-
-  if (session.token.expires_at && session.token.expires_at < now) {
-    return { error: true, cause: "token_expired" } as const
-  }
-  getVerifiedUserCounter.add(1)
-  console.info("api.user.profile getVerifiedUser start", JSON.stringify({}))
-  const apiResponse = await api.get(api.endpoints.v1.profile, {
-    headers: {
-      Authorization: `Bearer ${session.token.access_token}`,
-    },
-  })
-
-  if (!apiResponse.ok) {
-    const text = await apiResponse.text()
-    getVerifiedUserFailCounter.add(1, {
-      error_type: "http_error",
-      error: JSON.stringify({
-        status: apiResponse.status,
-        statusText: apiResponse.statusText,
-        text,
-      }),
+export const getVerifiedUser = cache(
+  async ({ session }: { session: Session }) => {
+    const now = Date.now()
+    if (session.token.expires_at && session.token.expires_at < now) {
+      return { error: true, cause: "token_expired" } as const
+    }
+    getVerifiedUserCounter.add(1)
+    console.info("api.user.profile getVerifiedUser start", JSON.stringify({}))
+    const apiResponse = await api.get(api.endpoints.v1.profile, {
+      headers: {
+        Authorization: `Bearer ${session.token.access_token}`,
+      },
     })
-    console.error(
-      "api.user.profile getVerifiedUser error",
-      JSON.stringify({
-        error: {
+
+    if (!apiResponse.ok) {
+      const text = await apiResponse.text()
+      getVerifiedUserFailCounter.add(1, {
+        error_type: "http_error",
+        error: JSON.stringify({
           status: apiResponse.status,
           statusText: apiResponse.statusText,
           text,
-        },
+        }),
       })
-    )
-    if (apiResponse.status === 401) {
-      return { error: true, cause: "unauthorized" } as const
-    } else if (apiResponse.status === 403) {
-      return { error: true, cause: "forbidden" } as const
-    } else if (apiResponse.status === 404) {
-      return { error: true, cause: "notfound" } as const
+      console.error(
+        "api.user.profile getVerifiedUser error",
+        JSON.stringify({
+          error: {
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text,
+          },
+        })
+      )
+      if (apiResponse.status === 401) {
+        return { error: true, cause: "unauthorized" } as const
+      } else if (apiResponse.status === 403) {
+        return { error: true, cause: "forbidden" } as const
+      } else if (apiResponse.status === 404) {
+        return { error: true, cause: "notfound" } as const
+      }
+      return {
+        error: true,
+        cause: "unknown",
+        status: apiResponse.status,
+      } as const
     }
-    return {
-      error: true,
-      cause: "unknown",
-      status: apiResponse.status,
-    } as const
-  }
 
-  const apiJson = await apiResponse.json()
-  if (!apiJson.data?.attributes) {
-    getVerifiedUserFailCounter.add(1, {
-      error_type: "data_error",
-    })
-    console.error(
-      "api.user.profile getVerifiedUser data error",
-      JSON.stringify({
-        apiResponse: apiJson,
+    const apiJson = await apiResponse.json()
+    if (!apiJson.data?.attributes) {
+      getVerifiedUserFailCounter.add(1, {
+        error_type: "data_error",
       })
-    )
-    return null
-  }
+      console.error(
+        "api.user.profile getVerifiedUser data error",
+        JSON.stringify({
+          apiResponse: apiJson,
+        })
+      )
+      return null
+    }
 
-  const verifiedData = getUserSchema.safeParse(apiJson)
-  if (!verifiedData.success) {
-    getVerifiedUserFailCounter.add(1, {
-      error_type: "validation_error",
-      error: JSON.stringify(verifiedData.error),
-    })
-    console.error(
-      "api.user.profile validation error",
-      JSON.stringify({
-        errors: verifiedData.error,
+    const verifiedData = getUserSchema.safeParse(apiJson)
+    if (!verifiedData.success) {
+      getVerifiedUserFailCounter.add(1, {
+        error_type: "validation_error",
+        error: JSON.stringify(verifiedData.error),
       })
-    )
-    return null
+      console.error(
+        "api.user.profile validation error",
+        JSON.stringify({
+          errors: verifiedData.error,
+        })
+      )
+      return null
+    }
+    getVerifiedUserSuccessCounter.add(1)
+    console.info("api.user.profile getVerifiedUser success", JSON.stringify({}))
+    return verifiedData
   }
-  getVerifiedUserSuccessCounter.add(1)
-  console.info("api.user.profile getVerifiedUser success", JSON.stringify({}))
-  return verifiedData
-}
+)
 
 function parsedUser(data: User, isMFA: boolean) {
   const country = countries.find((c) => c.code === data.address.countryCode)

From f5798562cce755c2127c9dc6d8288e8f67143c60 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 28 Oct 2024 09:16:58 +0100
Subject: [PATCH 07/10] PR Fixes

---
 components/Blocks/DynamicContent/index.tsx | 13 ++++---------
 components/Footer/index.tsx                | 10 ++++------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/components/Blocks/DynamicContent/index.tsx b/components/Blocks/DynamicContent/index.tsx
index bf816e3a8..a05f5551c 100644
--- a/components/Blocks/DynamicContent/index.tsx
+++ b/components/Blocks/DynamicContent/index.tsx
@@ -21,21 +21,16 @@ import LoadingSpinner from "@/components/LoadingSpinner"
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
 
-export default function DynamicContent({
-  dynamic_content,
-  firstItem,
-}: DynamicContentProps) {
+export default function DynamicContent(props: DynamicContentProps) {
   return (
     <Suspense fallback={<LoadingSpinner />}>
-      {renderDynamicComponent(dynamic_content, firstItem)}
+      <DynamicContentBlocks {...props} />
     </Suspense>
   )
 }
 
-function renderDynamicComponent(
-  dynamic_content: DynamicContentProps["dynamic_content"],
-  firstItem: DynamicContentProps["firstItem"]
-) {
+function DynamicContentBlocks(props: DynamicContentProps) {
+  const { dynamic_content, firstItem } = props
   switch (dynamic_content.component) {
     case DynamicContentEnum.Blocks.components.current_benefits:
       return <CurrentRewardsBlock {...dynamic_content} />
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 844de1b8f..1dfbe1572 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -12,11 +12,9 @@ export function preload() {
 
 export default function Footer() {
   return (
-    <Suspense>
-      <footer>
-        <FooterNavigation />
-        <FooterDetails />
-      </footer>
-    </Suspense>
+    <footer>
+      <FooterNavigation />
+      <FooterDetails />
+    </footer>
   )
 }

From c5fa407deeb89810aef52d2e8f846165260e618f Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian@weahead.se>
Date: Fri, 25 Oct 2024 15:52:13 +0200
Subject: [PATCH 08/10] fix: remove spaces in phone number in link because of
 bad schema

---
 components/TempDesignSystem/Alert/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/TempDesignSystem/Alert/index.tsx b/components/TempDesignSystem/Alert/index.tsx
index 2f1e97b6a..2c511b725 100644
--- a/components/TempDesignSystem/Alert/index.tsx
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -51,7 +51,7 @@ export default function Alert({
                   <span> {phoneContact.displayText} </span>
                   <Link
                     color="burgundy"
-                    href={`tel:${phoneContact.phoneNumber}`}
+                    href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
                   >
                     {phoneContact.phoneNumber}
                   </Link>

From 5e8efb4a27dc2f6db1ab5949e1625a18ef550212 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 28 Oct 2024 11:20:59 +0100
Subject: [PATCH 09/10] More memoized requests

---
 .../Current/Header/HeaderFallback/index.tsx   |  6 ++---
 components/Current/Header/index.tsx           | 14 +++++++-----
 .../MainMenu/MyPagesMenuWrapper/index.tsx     |  8 +++++--
 components/MyPages/Sidebar/index.tsx          |  4 ++--
 components/Sidebar/JoinLoyalty/index.tsx      |  4 ++--
 components/Sidebar/MyPagesNavigation.tsx      |  4 ++--
 lib/trpc/memoizedRequests/index.ts            | 22 +++++++++++++++----
 server/routers/contentstack/base/query.ts     |  6 +++--
 8 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/components/Current/Header/HeaderFallback/index.tsx b/components/Current/Header/HeaderFallback/index.tsx
index 8599beb27..7b6801a19 100644
--- a/components/Current/Header/HeaderFallback/index.tsx
+++ b/components/Current/Header/HeaderFallback/index.tsx
@@ -1,6 +1,6 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
-import { serverClient } from "@/lib/trpc/server"
+import { getCurrentHeader } from "@/lib/trpc/memoizedRequests"
 
 import { getLang } from "@/i18n/serverContext"
 
@@ -11,9 +11,7 @@ import TopMenu from "../TopMenu"
 import styles from "../header.module.css"
 
 export default async function HeaderFallback() {
-  const data = await serverClient().contentstack.base.currentHeader({
-    lang: getLang(),
-  })
+  const data = await getCurrentHeader(getLang())
 
   if (!data?.header) {
     return null
diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx
index 59b5e479b..26fe4b654 100644
--- a/components/Current/Header/index.tsx
+++ b/components/Current/Header/index.tsx
@@ -1,7 +1,11 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
-import { getLanguageSwitcher, getName } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import {
+  getCurrentHeader,
+  getLanguageSwitcher,
+  getMyPagesNavigation,
+  getName,
+} from "@/lib/trpc/memoizedRequests"
 
 import { getLang } from "@/i18n/serverContext"
 
@@ -15,12 +19,10 @@ import styles from "./header.module.css"
 
 export default async function Header() {
   const [data, user, languages, navigation] = await Promise.all([
-    serverClient().contentstack.base.currentHeader({
-      lang: getLang(),
-    }),
+    getCurrentHeader(getLang()),
     getName(),
     getLanguageSwitcher(),
-    serverClient().contentstack.myPages.navigation.get(),
+    getMyPagesNavigation(),
   ])
 
   if (!navigation || !languages || !data?.header) {
diff --git a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
index 0f5a8ef0e..3c2afb9fc 100644
--- a/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx
@@ -1,6 +1,10 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 import { myPages } from "@/constants/routes/myPages"
-import { getMembershipLevelSafely, getName } from "@/lib/trpc/memoizedRequests"
+import {
+  getMembershipLevelSafely,
+  getMyPagesNavigation,
+  getName,
+} from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
@@ -17,7 +21,7 @@ export default async function MyPagesMenuWrapper() {
   const lang = getLang()
   const [intl, myPagesNavigation, user, membership] = await Promise.all([
     getIntl(),
-    serverClient().contentstack.myPages.navigation.get(),
+    getMyPagesNavigation(),
     getName(),
     getMembershipLevelSafely(),
   ])
diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx
index b6169639e..5c4de4d2d 100644
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -1,7 +1,7 @@
 import { Fragment } from "react"
 
 import { logout } from "@/constants/routes/handleAuth"
-import { serverClient } from "@/lib/trpc/server"
+import { getMyPagesNavigation } from "@/lib/trpc/memoizedRequests"
 
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -12,7 +12,7 @@ import { getLang } from "@/i18n/serverContext"
 import styles from "./sidebar.module.css"
 
 export default async function SidebarMyPages() {
-  const navigation = await serverClient().contentstack.myPages.navigation.get()
+  const navigation = await getMyPagesNavigation()
   const { formatMessage } = await getIntl()
 
   return (
diff --git a/components/Sidebar/JoinLoyalty/index.tsx b/components/Sidebar/JoinLoyalty/index.tsx
index 31465ae78..13b3a91c5 100644
--- a/components/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Sidebar/JoinLoyalty/index.tsx
@@ -19,10 +19,10 @@ export default async function JoinLoyaltyContact({
   block,
 }: JoinLoyaltyContactProps) {
   const intl = await getIntl()
-  const username = await getName()
+  const user = await getName()
 
   // Check if we have user, that means we are logged in.
-  if (username) {
+  if (user) {
     return null
   }
   return (
diff --git a/components/Sidebar/MyPagesNavigation.tsx b/components/Sidebar/MyPagesNavigation.tsx
index 62d62cb82..9f1bc3cec 100644
--- a/components/Sidebar/MyPagesNavigation.tsx
+++ b/components/Sidebar/MyPagesNavigation.tsx
@@ -3,10 +3,10 @@ import { getName } from "@/lib/trpc/memoizedRequests"
 import MyPagesSidebar from "@/components/MyPages/Sidebar"
 
 export default async function MyPagesNavigation() {
-  const username = await getName()
+  const user = await getName()
 
   // Check if we have user, that means we are logged in andt the My Pages menu can show.
-  if (!username) {
+  if (!user) {
     return null
   }
   return <MyPagesSidebar />
diff --git a/lib/trpc/memoizedRequests/index.ts b/lib/trpc/memoizedRequests/index.ts
index 2bf70a9e9..d09349a8c 100644
--- a/lib/trpc/memoizedRequests/index.ts
+++ b/lib/trpc/memoizedRequests/index.ts
@@ -1,5 +1,7 @@
 import { cache } from "react"
 
+import { Lang } from "@/constants/languages"
+
 import { serverClient } from "../server"
 
 export const getLocations = cache(async function getMemoizedLocations() {
@@ -10,6 +12,10 @@ export const getProfile = cache(async function getMemoizedProfile() {
   return serverClient().user.get()
 })
 
+export const getName = cache(async function getMemoizedName() {
+  return serverClient().user.name()
+})
+
 export const getProfileSafely = cache(
   async function getMemoizedProfileSafely() {
     return serverClient().user.getSafely()
@@ -40,10 +46,6 @@ export const getMembershipCards = cache(
   }
 )
 
-export const getName = cache(async function getMemoizedName() {
-  return serverClient().user.name()
-})
-
 export const getUserTracking = cache(async function getMemoizedUserTracking() {
   return serverClient().user.tracking()
 })
@@ -66,6 +68,18 @@ export const getHeader = cache(async function getMemoizedHeader() {
   return serverClient().contentstack.base.header()
 })
 
+export const getCurrentHeader = cache(async function getMemoizedCurrentHeader(
+  lang: Lang
+) {
+  return serverClient().contentstack.base.currentHeader({ lang })
+})
+
+export const getMyPagesNavigation = cache(
+  async function getMemoizedMyPagesNavigation() {
+    return serverClient().contentstack.myPages.navigation.get()
+  }
+)
+
 export const getLanguageSwitcher = cache(
   async function getMemoizedLanguageSwitcher() {
     return serverClient().contentstack.languageSwitcher.get()
diff --git a/server/routers/contentstack/base/query.ts b/server/routers/contentstack/base/query.ts
index 3218b8bb6..d312d6042 100644
--- a/server/routers/contentstack/base/query.ts
+++ b/server/routers/contentstack/base/query.ts
@@ -1,3 +1,5 @@
+import { cache } from "react"
+
 import { Lang } from "@/constants/languages"
 import { GetContactConfig } from "@/lib/graphql/Query/ContactConfig.graphql"
 import {
@@ -92,7 +94,7 @@ import type {
   GetSiteConfigRefData,
 } from "@/types/trpc/routers/contentstack/siteConfig"
 
-async function getContactConfig(lang: Lang) {
+const getContactConfig = cache(async (lang: Lang) => {
   getContactConfigCounter.add(1, { lang })
   console.info(
     "contentstack.contactConfig start",
@@ -153,7 +155,7 @@ async function getContactConfig(lang: Lang) {
     JSON.stringify({ query: { lang } })
   )
   return validatedContactConfigConfig.data.all_contact_config.items[0]
-}
+})
 
 export const baseQueryRouter = router({
   contact: contentstackBaseProcedure.query(async ({ ctx }) => {

From 496cbcaa6cfe449ef64c0d5a760c219e7d0e66a6 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Mon, 28 Oct 2024 12:51:11 +0100
Subject: [PATCH 10/10] Removed unused import

---
 components/Footer/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index 1dfbe1572..789630982 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -1,5 +1,3 @@
-import { Suspense } from "react"
-
 import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import FooterDetails from "./Details"