Pontus Dreij
ea9d68a191
feat(SW-1540): Fetch data from API for MyStay * feat(SW-1540): Fetch data from API for MyStay * feat(SW-1540): Moved myStaySkeleton * feat(SW-1540) used memoized getBookingConfirmation instead Approved-by: Michael Zetterberg Approved-by: Linus Flood
48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
|
|
import styles from "./myStay.module.css"
|
|
|
|
export async function MyStaySkeleton() {
|
|
return (
|
|
<div className={styles.main}>
|
|
<div className={styles.headerSkeleton}>
|
|
<SkeletonShimmer width={"100%"} height="40px" />
|
|
<SkeletonShimmer width={"300px"} height="30px" />
|
|
</div>
|
|
<div className={styles.bookingActionsSkeleton}>
|
|
<SkeletonShimmer width={"300px"} height="20px" />
|
|
<div className={styles.bookingActionsSkeletonButtons}>
|
|
<SkeletonShimmer width={"125px"} height="50px" />
|
|
<SkeletonShimmer width={"125px"} height="50px" />
|
|
<SkeletonShimmer width={"125px"} height="50px" />
|
|
</div>
|
|
</div>
|
|
<div className={styles.roomSkeleton}>
|
|
<SkeletonShimmer width={"100%"} height="290px" />
|
|
</div>
|
|
<div className={styles.ancillariesSkeleton}>
|
|
<SkeletonShimmer width={"280px"} height="200px" />
|
|
<SkeletonShimmer width={"280px"} height="200px" />
|
|
<SkeletonShimmer width={"280px"} height="200px" />
|
|
<SkeletonShimmer width={"280px"} height="200px" />
|
|
<SkeletonShimmer width={"280px"} height="200px" />
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.paymentDetailsSkeleton}>
|
|
<SkeletonShimmer width={"200px"} height="30px" />
|
|
<SkeletonShimmer width={"180px"} height="20px" />
|
|
<SkeletonShimmer width={"190px"} height="20px" />
|
|
<SkeletonShimmer width={"170px"} height="20px" />
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.hotelDetailsSkeleton}>
|
|
<SkeletonShimmer width={"200px"} height="30px" />
|
|
<SkeletonShimmer width={"180px"} height="20px" />
|
|
<SkeletonShimmer width={"190px"} height="20px" />
|
|
<SkeletonShimmer width={"170px"} height="20px" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|