Added temp loading when clicking staycard #sw-222

components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -1,9 +1,12 @@
 "use client"
 
+import { useState } from "react"
+
 import { dt } from "@/lib/dt"
 
 import { CalendarIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import LoadingSpinner from "@/components/LoadingSpinner"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -16,6 +19,9 @@ import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 export default function StayCard({ stay }: StayCardProps) {
   const lang = useLang()
 
+  // TODO: Temporary loading. Remove when current web is deleted.
+  const [loading, setLoading] = useState(false)
+
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 
@@ -27,7 +33,11 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDateTime = depart.format("YYYY-MM-DD")
 
   return (
-    <Link href={bookingUrl} className={styles.link}>
+    <Link
+      href={bookingUrl}
+      className={styles.link}
+      onClick={() => setLoading(true)}
+    >
       <article className={styles.stay}>
         <Image
           className={styles.image}
@@ -52,6 +62,11 @@ export default function StayCard({ stay }: StayCardProps) {
           </div>
         </footer>
       </article>
+      {loading && (
+        <div className={styles.loadingcontainer}>
+          <LoadingSpinner />
+        </div>
+      )}
     </Link>
   )
 }

components/Blocks/DynamicContent/Stays/StayCard/stay.module.css

@@ -8,6 +8,7 @@
 
 .link {
   text-decoration: none;
+  position: relative;
 }
 
 .stay:hover {
@@ -45,3 +46,15 @@
   display: flex;
   gap: var(--Spacing-x-half);
 }
+
+.loadingcontainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 70px;
+  background: rgb(255 255 255 / 80%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}