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