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

25
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
View File

@@ -4,7 +4,9 @@ import { Suspense } from "react"
import { getHotel } from "@/lib/trpc/memoizedRequests"
import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import HotelInfoCard, {
HotelInfoCardSkeleton,
} from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import { RoomsContainer } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainer"
import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton"
import TrackingSDK from "@/components/TrackingSDK"
@@ -81,14 +83,19 @@ export default async function SelectRatePage({
return (
<>
<HotelInfoCard
hotelId={hotelId}
lang={params.lang}
fromDate={fromDate.toDate()}
toDate={toDate.toDate()}
adultArray={adultsInRoom}
childArray={childrenInRoom}
/>
<Suspense
key={JSON.stringify(searchParams)}
fallback={<HotelInfoCardSkeleton />}
>
<HotelInfoCard
hotelId={hotelId}
lang={params.lang}
fromDate={fromDate.toDate()}
toDate={toDate.toDate()}
adultArray={adultsInRoom}
childArray={childrenInRoom}
/>
</Suspense>
<Suspense
key={JSON.stringify(searchParams)}

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