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

Merged in feat/sw-3369-move-loadingspinner (pull request #2742)

Browse Source 
feat(SW-3369): Move LoadingSpinner to design-system

* Move LoadingSpinner to design-system


Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
2025-09-02 06:46:58 +00:00
parent 914871607d
commit 65c6bc4c59
29 changed files with 59 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/app/[lang]/(live)/(protected)/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
export default function Loading() {
return <LoadingSpinner fullPage />

2
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
export default function Loading() {
return <LoadingSpinner />

2
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
export default function Loading() {
return <LoadingSpinner fullPage />

2
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
export default function Loading() {
return <LoadingSpinner />

2
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
export default function Loading() {
return <LoadingSpinner fullPage />

2
apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/gla-payment-callback/page.tsx
View File

@@ -2,6 +2,7 @@ import { notFound } from "next/navigation"
import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
import { logger } from "@scandic-hotels/common/logger"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
import { PaymentCallbackStatusEnum } from "@/constants/booking"
@@ -9,7 +10,6 @@ import { serverClient } from "@/lib/trpc/server"
import GuaranteeCallback from "@/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback"
import TrackGuarantee from "@/components/HotelReservation/MyStay/TrackGuarantee"
import LoadingSpinner from "@/components/LoadingSpinner"
import type { LangParams, PageArgs } from "@/types/params"

2
apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
export default function Loading() {
return <LoadingSpinner fullPage />

2
apps/scandic-web/app/[lang]/(live)/(public)/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
// Commenting to trigger a build
export default function Loading() {

2
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/loading.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { SASModal } from "./sas-x-scandic/components/SASModal"

3
apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/loading.tsx
View File

@@ -1,10 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LoadingSpinner from "@/components/LoadingSpinner"
import { SASModal } from "../components/SASModal"
export default function Loading() {

2
apps/scandic-web/app/[lang]/webview/refresh/page.tsx
View File

@@ -1,4 +1,4 @@
import LoadingSpinner from "@/components/LoadingSpinner"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import styles from "./page.module.css"

2
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/Client.tsx
View File

@@ -3,9 +3,9 @@
import { keepPreviousData } from "@tanstack/react-query"
import { useState } from "react"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import Pagination from "@/components/MyPages/Pagination"
import useLang from "@/hooks/useLang"

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Client.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import Grids from "@/components/TempDesignSystem/Grids"
import useLang from "@/hooks/useLang"

2
apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx
View File

@@ -1,8 +1,8 @@
"use client"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import LoadingSpinner from "@/components/LoadingSpinner"
import Grids from "@/components/TempDesignSystem/Grids"
import useLang from "@/hooks/useLang"

2
apps/scandic-web/components/Blocks/DynamicContent/index.tsx
View File

@@ -1,5 +1,6 @@
import { Suspense } from "react"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
import HowItWorks from "@/components/Blocks/DynamicContent/HowItWorks"
@@ -19,7 +20,6 @@ import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierCo
import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
import LoadingSpinner from "@/components/LoadingSpinner"
import JobylonFeed from "./JobylonFeed"

3
apps/scandic-web/components/Dialog/index.tsx
View File

@@ -8,11 +8,10 @@ import {
import Body from "@scandic-hotels/design-system/Body"
import Link from "@scandic-hotels/design-system/Link"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import LoadingSpinner from "@/components/LoadingSpinner"
import styles from "./dialog.module.css"
import type { DialogProps } from "@/types/components/dialog"

2
apps/scandic-web/components/Headers/DynamicContent/index.tsx
View File

@@ -1,9 +1,9 @@
import { Suspense } from "react"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { DynamicContentEnum } from "@scandic-hotels/trpc/types/dynamicContent"
import EmployeeBenefitsCallToActions from "@/components/DigitalTeamMemberCard/EmployeeBenefits/CallToActions"
import LoadingSpinner from "@/components/LoadingSpinner"
import type { HeaderDynamicContentProps } from "@/types/components/headers/dynamicContent"

2
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx
View File

@@ -5,11 +5,11 @@ import { useEffect } from "react"
import { serializeBookingSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import { trackEvent } from "@scandic-hotels/common/tracking/base"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { PaymentCallbackStatusEnum } from "@/constants/booking"
import { detailsStorageName } from "@/stores/enter-details"
import LoadingSpinner from "@/components/LoadingSpinner"
import { trackPaymentEvent } from "@/utils/tracking"
import {

2
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/HandleSuccessCallback.tsx
View File

@@ -3,11 +3,11 @@
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
import { MEMBERSHIP_FAILED_ERROR } from "@/constants/booking"
import LoadingSpinner from "@/components/LoadingSpinner"
import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
import TimeoutSpinner from "./TimeoutSpinner"

2
apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
View File

@@ -4,11 +4,11 @@ import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import Link from "@scandic-hotels/design-system/Link"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { customerService } from "@/constants/webHrefs"
import LoadingSpinner from "@/components/LoadingSpinner"
import useLang from "@/hooks/useLang"
import styles from "./timeoutSpinner.module.css"

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
View File

@@ -11,6 +11,7 @@ import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotel
import { dt } from "@scandic-hotels/common/dt"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import Modal from "@scandic-hotels/design-system/Modal"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -31,7 +32,6 @@ import {
getAncillarySessionData,
setAncillarySessionData,
} from "@/components/HotelReservation/MyStay/utils/ancillaries"
import LoadingSpinner from "@/components/LoadingSpinner"
import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
import useLang from "@/hooks/useLang"
import {

2
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/GuaranteeCallback/index.tsx
View File

@@ -3,13 +3,13 @@
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { trpc } from "@scandic-hotels/trpc/client"
import {
clearAncillarySessionData,
getAncillarySessionData,
} from "@/components/HotelReservation/MyStay/utils/ancillaries"
import LoadingSpinner from "@/components/LoadingSpinner"
import {
trackAncillaryFailed,
trackAncillarySuccess,

2
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
View File

@@ -9,6 +9,7 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import Link from "@scandic-hotels/design-system/Link"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { toast } from "@scandic-hotels/design-system/Toast"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -20,7 +21,6 @@ import { writeGlaToSessionStorage } from "@/components/HotelReservation/EnterDet
import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import LoadingSpinner from "@/components/LoadingSpinner"
import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
import useLang from "@/hooks/useLang"
import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"

2
apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx
View File

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { trackEvent } from "@scandic-hotels/common/tracking/base"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { PaymentCallbackStatusEnum } from "@/constants/booking"
@@ -12,7 +13,6 @@ import {
readGlaFromSessionStorage,
} from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/helpers"
import { getAncillarySessionData } from "@/components/HotelReservation/MyStay/utils/ancillaries"
import LoadingSpinner from "@/components/LoadingSpinner"
import {
buildAncillariesTracking,
buildBreakfastTracking,

22
apps/scandic-web/components/LoadingSpinner/index.tsx
View File

@@ -1,22 +0,0 @@
import styles from "./loading.module.css"
export default function LoadingSpinner({ fullPage }: { fullPage?: boolean }) {
return (
<div className={`${styles.container} ${fullPage ? styles.fullPage : ""}`}>
<div className={styles.spinner}>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
)
}

76
apps/scandic-web/components/LoadingSpinner/loading.module.css
View File

@@ -1,76 +0,0 @@
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.fullPage {
min-height: 100dvh;
}
.spinner {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
}
.spinner div {
transform-origin: 20px 20px;
animation: spinnerAnimation 0.8s linear infinite;
}
.spinner div::after {
content: " ";
display: block;
position: absolute;
top: 3px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 100%;
background: var(--Scandic-Brand-Burgundy);
}
.spinner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -0.7s;
}
.spinner div:nth-child(2) {
transform: rotate(45deg);
animation-delay: -0.6s;
}
.spinner div:nth-child(3) {
transform: rotate(90deg);
animation-delay: -0.5s;
}
.spinner div:nth-child(4) {
transform: rotate(135deg);
animation-delay: -0.4s;
}
.spinner div:nth-child(5) {
transform: rotate(180deg);
animation-delay: -0.3s;
}
.spinner div:nth-child(6) {
transform: rotate(225deg);
animation-delay: -0.2s;
}
.spinner div:nth-child(7) {
transform: rotate(270deg);
animation-delay: -0.1s;
}
.spinner div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0s;
}
@keyframes spinnerAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

2
apps/scandic-web/providers/EnterDetailsProvider.tsx
View File

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react"
import { isSameBooking } from "@scandic-hotels/booking-flow/utils/isSameBooking"
import { dt } from "@scandic-hotels/common/dt"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import { createDetailsStore } from "@/stores/enter-details"
import {
@@ -15,7 +16,6 @@ import {
import { getMultiroomDetailsSchema } from "@/components/HotelReservation/EnterDetails/Details/Multiroom/schema"
import { guestDetailsSchema } from "@/components/HotelReservation/EnterDetails/Details/RoomOne/schema"
import LoadingSpinner from "@/components/LoadingSpinner"
import { DetailsContext } from "@/contexts/Details"
import type { DetailsStore } from "@/types/contexts/enter-details"