From e90c218440e6c344db370e94afb25a70f2f72b8c Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 25 Jun 2025 12:05:53 +0000
Subject: [PATCH] feat: Added skeletons for campaign pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../CampaignOverviewPageSkeleton.tsx          | 31 ++++++++++++++--
 .../TopCampaign/TopCampaignSkeleton.tsx       | 18 ++++++++++
 .../CampaignPage/CampaignPageSkeleton.tsx     | 36 +++++++++++++++++--
 3 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx

diff --git a/apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx b/apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx
index 5ad3a57c9..3425b82ad 100644
--- a/apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx
+++ b/apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx
@@ -1,5 +1,8 @@
 "use client"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import TopCampaignSkeleton from "@/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./campaignOverviewPage.module.css"
@@ -7,9 +10,31 @@ import styles from "./campaignOverviewPage.module.css"
 export default function CampaignOverviewPageSkeleton() {
   return (
     <div className={styles.pageContainer}>
-      <h1>
-        <SkeletonShimmer width="50%" height="2rem" />
-      </h1>
+      <header className={styles.header}>
+        <div className={styles.headerContent}>
+          <div className={styles.headerIntro}>
+            <Typography variant="Title/lg">
+              <SkeletonShimmer width="20ch" />
+            </Typography>
+            <Typography variant="Body/Lead text">
+              <p>
+                <SkeletonShimmer width="80ch" />
+                <SkeletonShimmer width="95ch" />
+                <SkeletonShimmer width="55ch" />
+              </p>
+            </Typography>
+          </div>
+          <div style={{ display: "flex", gap: "1rem" }}>
+            <SkeletonShimmer width="13ch" height="38px" />
+            <SkeletonShimmer width="18ch" height="38px" />
+            <SkeletonShimmer width="12ch" height="38px" />
+            <SkeletonShimmer width="15ch" height="38px" />
+          </div>
+        </div>
+      </header>
+      <main className={styles.mainContent}>
+        <TopCampaignSkeleton />
+      </main>
     </div>
   )
 }
diff --git a/apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx b/apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx
new file mode 100644
index 000000000..f7abc8edf
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx
@@ -0,0 +1,18 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import styles from "./topCampaign.module.css"
+
+export default async function TopCampaignSkeleton() {
+  return (
+    <section className={styles.topCampaign}>
+      <Typography variant="Title/md">
+        <SkeletonShimmer width="20ch" />
+      </Typography>
+      <SkeletonShimmer width="100%" height="478px" />
+      <CampaignHotelListingSkeleton />
+    </section>
+  )
+}
diff --git a/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx b/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
index 984581331..27e6473f4 100644
--- a/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
+++ b/apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
@@ -1,5 +1,8 @@
 "use client"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./campaignPage.module.css"
@@ -7,9 +10,36 @@ import styles from "./campaignPage.module.css"
 export default function CampaignPageSkeleton() {
   return (
     <div className={styles.pageContainer}>
-      <h1>
-        <SkeletonShimmer width="50%" height="2rem" />
-      </h1>
+      <SkeletonShimmer width="100%" height="478px" />
+
+      <div className={styles.intro}>
+        <div className={styles.headingWrapper}>
+          <Typography variant="Title/lg">
+            <SkeletonShimmer width="20ch" />
+          </Typography>
+          <Typography variant="Title/Subtitle/lg">
+            <SkeletonShimmer width="50ch" />
+          </Typography>
+        </div>
+        <Typography variant="Body/Lead text">
+          <div className={styles.preamble}>
+            <p>
+              <SkeletonShimmer width="80ch" />
+              <SkeletonShimmer width="70ch" />
+              <SkeletonShimmer width="75ch" />
+              <SkeletonShimmer width="65ch" />
+              <SkeletonShimmer width="30ch" />
+            </p>
+          </div>
+        </Typography>
+      </div>
+      <div>
+        <Typography variant="Title/smRegular">
+          <SkeletonShimmer width="30ch" />
+        </Typography>
+        <SkeletonShimmer width="100%" height="110px" />
+      </div>
+      <CampaignHotelListingSkeleton />
     </div>
   )
 }