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

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

* Move LoadingSpinner to design-system


Approved-by: Joakim Jäderberg

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

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

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

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

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

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

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

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

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

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

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

@@ -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"
 

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

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

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

@@ -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() {

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

@@ -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"
 

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

@@ -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() {

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

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

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

@@ -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"
 

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

@@ -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"
 

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

@@ -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"
 

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

@@ -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"
 

apps/scandic-web/components/Dialog/index.tsx

@@ -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"

apps/scandic-web/components/Headers/DynamicContent/index.tsx

@@ -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"
 

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

@@ -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 {

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

@@ -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"

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

@@ -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"

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

@@ -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 {

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

@@ -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,

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

@@ -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"

apps/scandic-web/components/HotelReservation/MyStay/TrackGuarantee.tsx

@@ -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,

apps/scandic-web/providers/EnterDetailsProvider.tsx

@@ -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"

packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { LoadingSpinner } from './index'
+
+const meta: Meta<typeof LoadingSpinner> = {
+  title: 'Components/LoadingSpinner',
+  component: LoadingSpinner,
+  argTypes: {
+    fullPage: {
+      control: 'check',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoadingSpinner>
+
+export const Default: Story = {
+  args: {
+    fullPage: false,
+  },
+}
+
+export const Fullpage: Story = {
+  args: {
+    fullPage: true,
+  },
+}

packages/design-system/lib/components/LoadingSpinner/index.tsx

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

packages/design-system/lib/components/LoadingSpinner/loading.module.css

@@ -22,7 +22,7 @@
 }
 
 .spinner div::after {
-  content: " ";
+  content: ' ';
   display: block;
   position: absolute;
   top: 3px;

packages/design-system/package.json

@@ -131,6 +131,7 @@
     "./Label": "./lib/components/Label/index.tsx",
     "./Lightbox": "./lib/components/Lightbox/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",
+    "./LoadingSpinner": "./lib/components/LoadingSpinner/index.tsx",
     "./Map/InteractiveMap": "./lib/components/Map/InteractiveMap/index.tsx",
     "./Map/mapConstants": "./lib/components/Map/mapConstants.ts",
     "./Map/Markers/HotelMarkerByType": "./lib/components/Map/Markers/HotelMarkerByType.tsx",