Merged develop into feat/sw-700-designglitch-divider

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"
@@ -9,8 +10,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(),
+    getMembershipLevelSafely(),
+  ])
+
   return (
     <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
       <OverviewTableClient

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

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

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,14 +16,21 @@ 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({
-  dynamic_content,
-  firstItem,
-}: DynamicContentProps) {
+export default function DynamicContent(props: DynamicContentProps) {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <DynamicContentBlocks {...props} />
+    </Suspense>
+  )
+}
+
+function DynamicContentBlocks(props: DynamicContentProps) {
+  const { dynamic_content, firstItem } = props
   switch (dynamic_content.component) {
     case DynamicContentEnum.Blocks.components.current_benefits:
       return <CurrentRewardsBlock {...dynamic_content} />