Merged in fix/LOY-52-remove-spinner-stay-cards (pull request #2232)

fix(LOY-52): remove spinner on stay cards to prevent loading to spin indefinitely when opening link in a new tab

Approved-by: Linus Flood

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -1,13 +1,10 @@
 "use client"
 
-import { useState } from "react"
-
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
 
 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"
@@ -18,9 +15,6 @@ import styles from "./stay.module.css"
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
 export default function StayCard({ stay }: StayCardProps) {
-  // TODO: Temporary loading. Remove when current web is deleted.
-  const [loading, setLoading] = useState(false)
-
   const { bookingUrl, isWebAppOrigin } = stay.attributes
 
   const shouldLinkToMyStay = isWebAppOrigin
@@ -30,17 +24,8 @@ export default function StayCard({ stay }: StayCardProps) {
   }
 
   return (
-    <Link
-      href={bookingUrl}
-      className={styles.link}
-      onClick={() => setLoading(true)}
-    >
+    <Link href={bookingUrl} className={styles.link}>
       <CardContent stay={stay} />
-      {loading && (
-        <div className={styles.loadingcontainer}>
-          <LoadingSpinner />
-        </div>
-      )}
     </Link>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css

@@ -2,7 +2,6 @@
   outline: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-md);
   overflow: hidden;
-  position: relative;
 
   &:focus,
   &:hover {
@@ -25,10 +24,10 @@
 .footer {
   color: var(--Scandic-Brand-Burgundy);
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
   margin-top: auto;
   overflow: hidden;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
   width: 100%;
 }
 
@@ -41,18 +40,5 @@
 .date {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x-half);
-}
-
-.loadingcontainer {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgb(255 255 255 / 80%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 70px;
+  gap: var(--Space-x05);
 }