scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Christian Andolf
2025-05-27 07:31:47 +00:00
parent e2c1b066be 6f585a2c1e
commit 883fd23949
2 changed files with 4 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,10 @@
"use client" "use client"
import { useState } from "react"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import Image from "@/components/Image" import Image from "@/components/Image"
import LoadingSpinner from "@/components/LoadingSpinner"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title" 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" import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
export default function StayCard({ stay }: StayCardProps) { 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 { bookingUrl, isWebAppOrigin } = stay.attributes
const shouldLinkToMyStay = isWebAppOrigin const shouldLinkToMyStay = isWebAppOrigin
@@ -30,17 +24,8 @@ export default function StayCard({ stay }: StayCardProps) {
} }
return ( return (
<Link <Link href={bookingUrl} className={styles.link}>
href={bookingUrl}
className={styles.link}
onClick={() => setLoading(true)}
>
<CardContent stay={stay} /> <CardContent stay={stay} />
{loading && (
<div className={styles.loadingcontainer}>
<LoadingSpinner />
</div>
)}
</Link> </Link>
) )
} }

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

@@ -2,7 +2,6 @@
outline: 1px solid var(--Base-Border-Subtle); outline: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
overflow: hidden; overflow: hidden;
position: relative;
&:focus, &:focus,
&:hover { &:hover {
@@ -25,10 +24,10 @@
.footer { .footer {
color: var(--Scandic-Brand-Burgundy); color: var(--Scandic-Brand-Burgundy);
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Space-x2);
margin-top: auto; margin-top: auto;
overflow: hidden; overflow: hidden;
padding: var(--Spacing-x2); padding: var(--Space-x2);
width: 100%; width: 100%;
} }
@@ -41,18 +40,5 @@
.date { .date {
align-items: center; align-items: center;
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Space-x05);
}
.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;
} }