scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Added skeletons for campaign pages

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-06-25 12:05:53 +00:00
parent 1e89fd4fe7
commit e90c218440
3 changed files with 79 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx
View File

@@ -1,5 +1,8 @@
"use client" "use client"
import { Typography } from "@scandic-hotels/design-system/Typography"
import TopCampaignSkeleton from "@/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./campaignOverviewPage.module.css" import styles from "./campaignOverviewPage.module.css"
@@ -7,9 +10,31 @@ import styles from "./campaignOverviewPage.module.css"
export default function CampaignOverviewPageSkeleton() { export default function CampaignOverviewPageSkeleton() {
return ( return (
<div className={styles.pageContainer}> <div className={styles.pageContainer}>
<h1> <header className={styles.header}>
<SkeletonShimmer width="50%" height="2rem" /> <div className={styles.headerContent}>
</h1> <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> </div>
) )
} }

18
apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx Normal file
View File

@@ -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>
)
}

36
apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx
View File

@@ -1,5 +1,8 @@
"use client" "use client"
import { Typography } from "@scandic-hotels/design-system/Typography"
import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./campaignPage.module.css" import styles from "./campaignPage.module.css"
@@ -7,9 +10,36 @@ import styles from "./campaignPage.module.css"
export default function CampaignPageSkeleton() { export default function CampaignPageSkeleton() {
return ( return (
<div className={styles.pageContainer}> <div className={styles.pageContainer}>
<h1> <SkeletonShimmer width="100%" height="478px" />
<SkeletonShimmer width="50%" height="2rem" />
</h1> <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> </div>
) )
} }