Merged in chore/sw-3145-move-skeleton-shimmer (pull request #2509)

chore(SW-3145): Move SkeletonShimmer to design-system

* Move SkeletonShimmer to design-system


Approved-by: Joakim Jäderberg

apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/transfer/success/page.tsx

@@ -3,13 +3,13 @@ import React, { Suspense } from "react"
 
 import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
 import Image from "@/components/Image"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import { getIntl } from "@/i18n"
 

apps/scandic-web/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton.tsx

@@ -1,9 +1,8 @@
 "use client"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
-
 import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"
 
 import styles from "./campaignHotelListing.module.css"

apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/HotelListingItemSkeleton.tsx

@@ -1,8 +1,7 @@
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
-
 import styles from "./hotelListingItem.module.css"
 
 export default function HotelListingItemSkeleton() {

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

@@ -3,6 +3,7 @@ import { type ReactNode, Suspense } from "react"
 
 import DiamondAddIcon from "@scandic-hotels/design-system/Icons/DiamondAddIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
 
@@ -15,7 +16,6 @@ import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { getIntl } from "@/i18n"
 
 import { UnlinkSAS } from "./UnlinkSAS"

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsForm.tsx

@@ -1,11 +1,11 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getEurobonusMembership } from "@scandic-hotels/trpc/routers/user/helpers"
 
 import { getProfileWithExtendedPartnerData } from "@/lib/trpc/memoizedRequests"
 
 import Image from "@/components/Image"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { getIntl } from "@/i18n"
 
 import { TransferPointsFormClient } from "./TransferPointsFormClient"

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -7,11 +7,11 @@ import { useIntl } from "react-intl"
 import { dt } from "@scandic-hotels/common/dt"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { shortDateFormat } from "@/constants/dateFormats"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import useLang from "@/hooks/useLang"
 
 import styles from "./button.module.css"

apps/scandic-web/components/ContentType/CampaignOverviewPage/CampaignOverviewPageSkeleton.tsx

@@ -1,9 +1,9 @@
 "use client"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import TopCampaignSkeleton from "@/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./campaignOverviewPage.module.css"
 

apps/scandic-web/components/ContentType/CampaignOverviewPage/TopCampaign/TopCampaignSkeleton.tsx

@@ -1,7 +1,7 @@
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./topCampaign.module.css"
 

apps/scandic-web/components/ContentType/CampaignPage/CampaignPageSkeleton.tsx

@@ -1,9 +1,9 @@
 "use client"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import CampaignHotelListingSkeleton from "@/components/Blocks/CampaignHotelListing/CampaignHotelListingSkeleton"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./campaignPage.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/CityListingItemSkeleton.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
-
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import ExperienceListSkeleton from "../../ExperienceList/ExperienceListSkeleton"
 

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import CityListingItemSkeleton from "./CityListingItem/CityListingItemSkeleton"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/HotelListSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import HotelListItemSkeleton from "../HotelListItem/HotelListItemSkeleton"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/HotelListItemSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./hotelListItem.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 
 import ExperienceListSkeleton from "../ExperienceList/ExperienceListSkeleton"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityList/CityListSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import CityListItemSkeleton from "../CityListItem/CityListItemSkeleton"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/CityListItemSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import ExperienceListSkeleton from "../../../ExperienceList/ExperienceListSkeleton"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 
 import CityListingSkeleton from "../CityListing/CityListingSkeleton"

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx

@@ -1,11 +1,11 @@
 import { Suspense } from "react"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getDestinationOverviewPage } from "@/lib/trpc/memoizedRequests"
 
 import Blocks from "@/components/Blocks"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import TrackingSDK from "@/components/TrackingSDK"
 
 import { DestinationSearch } from "./DestinationSearch"

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/ExperienceListSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./experienceList.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/HotelListingItemSkeleton.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
-
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./hotelListingItem.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"
 

apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/SidebarContentWrapperSkeleton.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./sidebarContentWrapper.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/TopImages/TopImagesSkeleton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./topImages.module.css"
 

apps/scandic-web/components/Current/Header/LanguageSwitcher/index.tsx

@@ -2,9 +2,9 @@
 
 import { usePathname } from "next/navigation"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { trpc } from "@scandic-hotels/trpc/client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import useLang from "@/hooks/useLang"
 
 import Desktop from "./Desktop"

apps/scandic-web/components/Current/Header/MainMenu/index.tsx

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 import { findMyBookingCurrentWebPath } from "@scandic-hotels/common/constants/routes/findMyBooking"
 import { myPages } from "@scandic-hotels/common/constants/routes/myPages"
 import { getCurrentWebUrl } from "@scandic-hotels/common/utils/url"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { logout } from "@/constants/routes/handleAuth"
 import { env } from "@/env/client"
@@ -15,7 +16,6 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import LoginButton from "@/components/LoginButton"
 import Avatar from "@/components/MyPages/Avatar"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"

apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -3,12 +3,12 @@
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { logout } from "@/constants/routes/handleAuth"
 import useDropdownStore from "@/stores/main-menu"
 
 import { useMyPagesNavigation } from "@/components/Header/MainMenu/MyPagesMenuContent"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"

apps/scandic-web/components/Current/Header/TopMenu/index.tsx

@@ -1,10 +1,10 @@
 import { overview } from "@scandic-hotels/common/constants/routes/myPages"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { logout } from "@/constants/routes/handleAuth"
 import { getName } from "@/lib/trpc/memoizedRequests"
 
 import LoginButton from "@/components/LoginButton"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

apps/scandic-web/components/Footer/Details/index.tsx

@@ -1,10 +1,10 @@
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getFooter } from "@/lib/trpc/memoizedRequests"
 
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import { trackFooterClick } from "@/utils/tracking"
 

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/ListItem/index.tsx

@@ -1,6 +1,5 @@
 import Body from "@scandic-hotels/design-system/Body"
-
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import { listItemVariants } from "./variants"
 

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/SearchList/List/index.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import Label from "./Label"
 import ListItem, { ListItemSkeleton } from "./ListItem"

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -9,9 +9,9 @@ import { useIntl } from "react-intl"
 import { logger } from "@scandic-hotels/common/logger"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { useSearchHistory } from "@/hooks/useSearchHistory"
 
 import { Input } from "../Input"

apps/scandic-web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx

@@ -3,8 +3,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
-
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import BookingCode from "../BookingCode"
 import RewardNight from "../RewardNight"

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 
@@ -13,7 +14,6 @@ import { hotelreservation } from "@/constants/routes/hotelReservation"
 
 import DatePicker from "@/components/DatePicker"
 import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -5,10 +5,10 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { getInitials } from "@/utils/user"

apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx

@@ -1,6 +1,6 @@
 import { cx } from "class-variance-authority"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import NavigationMenuItem from "../NavigationMenuItem"
 

apps/scandic-web/components/Header/TopMenu/index.tsx

@@ -1,10 +1,10 @@
 import { findMyBooking } from "@scandic-hotels/common/constants/routes/findMyBooking"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { getHeader } from "@/lib/trpc/memoizedRequests"
 
 import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"

apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx

@@ -3,10 +3,10 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./paymentDetails.module.css"

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/RoomSkeletonLoader.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./roomSkeletonLoader.module.css"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx

@@ -4,12 +4,12 @@ import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import PriceDetails from "../../PriceDetails"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/LinkedReservationCardSkeleton.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./linkedReservationCardSkeleton.module.css"
 

apps/scandic-web/components/HotelReservation/HotelCard/HotelCardSkeleton.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./HotelCardSkeleton.module.css"
 

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Cheques.tsx

@@ -2,9 +2,9 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { formatPrice } from "@/utils/numberFormatting"
 
 export default function Cheques({

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Points.tsx

@@ -2,9 +2,9 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { formatPrice } from "@/utils/numberFormatting"
 
 export default function Points({

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Vouchers.tsx

@@ -1,9 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency"

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx

@@ -1,12 +1,12 @@
 "use client"
 
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
 import PriceDetails from "@/components/HotelReservation/MyStay/PriceDetails"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import BookingInformation from "./BookingInformation"
 import Details from "./Details"

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

@@ -1,6 +1,6 @@
 "use client"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./myStay.module.css"
 

apps/scandic-web/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./RoomCardSkeleton.module.css"
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx

@@ -1,5 +1,6 @@
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+
 import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 
 import styles from "./SelectHotelMapContainerSkeleton.module.css"
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { HotelCardSkeleton } from "../HotelCard/HotelCardSkeleton"
 

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,10 +1,10 @@
 import { dt } from "@scandic-hotels/common/dt"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx

@@ -4,10 +4,10 @@ import { useSession } from "next-auth/react"
 
 import { dt } from "@scandic-hotels/common/dt"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import { useRatesStore } from "@/stores/select-rate"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { isValidClientSession } from "@/utils/clientSession"
 

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

@@ -6,6 +6,7 @@ import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
@@ -17,7 +18,6 @@ import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 import { trackLanguageSwitchClick } from "@/utils/tracking/navigation"
 
-import SkeletonShimmer from "../SkeletonShimmer"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
 import { languageSwitcherVariants } from "./variants"

apps/scandic-web/components/MeetingPackageWidget/Skeleton/index.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "@/components/SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./skeleton.module.css"
 

apps/scandic-web/components/Sidebar/SidebarSkeleton.tsx

@@ -1,4 +1,4 @@
-import SkeletonShimmer from "../SkeletonShimmer"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
 import styles from "./sidebar.module.css"
 

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx

@@ -1,7 +1,7 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import SkeletonShimmer from "@/components/SkeletonShimmer"
 import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
 
 import { breadcrumbsVariants } from "../variants"

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

@@ -1,6 +1,6 @@
-import { cva, cx } from "class-variance-authority"
+import { cva, cx } from 'class-variance-authority'
 
-import styles from "./skeleton.module.css"
+import styles from './skeleton.module.css'
 
 const variants = cva(styles.shimmer, {
   variants: {
@@ -10,12 +10,12 @@ const variants = cva(styles.shimmer, {
     },
     display: {
       block: styles.block,
-      "inline-block": styles.inlineBlock,
+      'inline-block': styles.inlineBlock,
     },
   },
   defaultVariants: {
-    contrast: "light",
+    contrast: 'light',
-    display: "inline-block",
+    display: 'inline-block',
   },
 })
 
@@ -23,14 +23,14 @@ export default function SkeletonShimmer({
   className,
   height,
   width,
-  contrast = "light",
+  contrast = 'light',
-  display = "inline-block",
+  display = 'inline-block',
 }: {
   className?: string
   height?: string
   width?: string
-  contrast?: "light" | "dark"
+  contrast?: 'light' | 'dark'
-  display?: "block" | "inline-block"
+  display?: 'block' | 'inline-block'
 }) {
   return (
     <span
@@ -38,11 +38,10 @@ export default function SkeletonShimmer({
       style={{
         height: height,
         width: width,
-        maxWidth: "100%",
+        maxWidth: '100%',
       }}
     >
       {/* zero width space, allows for font styles to affect height */}
-      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
       <span aria-hidden="true">&#8203;</span>
     </span>
   )

packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css

@@ -35,7 +35,7 @@
   transform: translateX(-100%);
   background-image: var(--shimmer);
   animation: shimmer 3s infinite;
-  content: "";
+  content: '';
 }
 .shimmer span {
   visibility: hidden;

packages/design-system/package.json

@@ -17,6 +17,7 @@
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",
+    "./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
     "./Tooltip": "./dist/components/Tooltip/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",