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

Merged in feat/hotelinfocard-skeleton (pull request #1291)

Browse Source 
feat: added skeleton to hotelinfo card

* feat: added skeleton to hotelinfo card


Approved-by: Simon.Emanuelsson
This commit is contained in:
Linus Flood
2025-02-10 12:49:27 +00:00
parent eb0b88f8ea
commit 2522cd7752
2 changed files with 62 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -2,6 +2,7 @@ import { getHotel } from "@/lib/trpc/memoizedRequests"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -118,3 +119,48 @@ export default async function HotelInfoCard({
</article>
)
}
export function HotelInfoCardSkeleton() {
return (
<article className={styles.container}>
<section className={styles.wrapper}>
<div className={styles.imageWrapper}>
<SkeletonShimmer height={"100%"} width={"100%"} />
</div>
<div className={styles.hotelContent}>
<div className={styles.hotelInformation}>
<SkeletonShimmer width={"60ch"} height={"40px"} />
<div className={styles.hotelAddressDescription}>
<Caption color="uiTextMediumContrast">
<SkeletonShimmer width={"40ch"} />
</Caption>
<Body color="uiTextHighContrast">
<SkeletonShimmer width={"60ch"} />
<SkeletonShimmer width={"58ch"} />
<SkeletonShimmer width={"45ch"} />
</Body>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Body textTransform="bold" className={styles.facilityTitle}>
<SkeletonShimmer width={"20ch"} />
</Body>
{[1, 2, 3, 4, 5]?.map((id) => {
return (
<div className={styles.facilitiesItem} key={id}>
<SkeletonShimmer width={"10ch"} />
</div>
)
})}
</div>
<div className={styles.hotelAlert}>
<SkeletonShimmer width={"18ch"} />
</div>
</div>
</div>
</section>
</article>
)
}