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

9
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 { 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 { RoomsContainer } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainer"
import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton" import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton"
import TrackingSDK from "@/components/TrackingSDK" import TrackingSDK from "@/components/TrackingSDK"
@@ -81,6 +83,10 @@ export default async function SelectRatePage({
return ( return (
<> <>
<Suspense
key={JSON.stringify(searchParams)}
fallback={<HotelInfoCardSkeleton />}
>
<HotelInfoCard <HotelInfoCard
hotelId={hotelId} hotelId={hotelId}
lang={params.lang} lang={params.lang}
@@ -89,6 +95,7 @@ export default async function SelectRatePage({
adultArray={adultsInRoom} adultArray={adultsInRoom}
childArray={childrenInRoom} childArray={childrenInRoom}
/> />
</Suspense>
<Suspense <Suspense
key={JSON.stringify(searchParams)} 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 { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery" import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Alert from "@/components/TempDesignSystem/Alert" import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
@@ -118,3 +119,48 @@ export default async function HotelInfoCard({
</article> </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>
)
}