Merged in feat/SW-1454-listing-skeletons (pull request #1301)

Feat/SW-1454 listing skeletons

* feat(SW-1453): added skeleton for city listning

* feat(SW-1454): added skeleton for hotel listning


Approved-by: Fredrik Thorsson

components/ContentType/DestinationPage/CityListing/CityListingItem/CityListingItemSkeleton.tsx

@@ -0,0 +1,32 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import ExperienceListSkeleton from "../../ExperienceList/ExperienceListSkeleton"
+
+import styles from "./cityListingItem.module.css"
+
+export default async function CityListingItemSkeleton() {
+  return (
+    <article className={styles.container}>
+      <div className={styles.imageWrapper}>
+        <SkeletonShimmer width="100%" height="100%" />
+      </div>
+      <section className={styles.content}>
+        <SkeletonShimmer height="52px" />
+        <ExperienceListSkeleton />
+        <div>
+          <SkeletonShimmer height="20px" width="95%" />
+          <SkeletonShimmer height="20px" width="100%" />
+          <SkeletonShimmer height="20px" width="90%" />
+          <SkeletonShimmer height="20px" width="40%" />
+        </div>
+
+        <Divider variant="horizontal" color="primaryLightSubtle" />
+
+        <div className={styles.ctaWrapper}>
+          <SkeletonShimmer height="45px" width="100px" />
+        </div>
+      </section>
+    </article>
+  )
+}

components/ContentType/DestinationPage/CityListing/CityListingSkeleton.tsx

@@ -0,0 +1,20 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import CityListingItemSkeleton from "./CityListingItem/CityListingItemSkeleton"
+
+import styles from "./cityListing.module.css"
+
+export default async function CityListingSkeleton() {
+  return (
+    <section className={styles.container}>
+      <div>
+        <SkeletonShimmer height="30px" width="300px" />
+      </div>
+      <ul className={styles.cityList}>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <CityListingItemSkeleton key={index} />
+        ))}
+      </ul>
+    </section>
+  )
+}

components/ContentType/DestinationPage/CityListing/index.tsx

@@ -1,3 +1,5 @@
+import { getDestinationCityPagesByCountry } from "@/lib/trpc/memoizedRequests"
+
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
@@ -5,18 +7,23 @@ import CityListingItem from "./CityListingItem"
 
 import styles from "./cityListing.module.css"
 
-import type { DestinationCityListItem } from "@/types/trpc/routers/contentstack/destinationCityPage"
+import type { Country } from "@/types/enums/country"
 
 interface CityListingProps {
-  cities: DestinationCityListItem[]
+  country: Country
 }
 
-export default async function CityListing({ cities }: CityListingProps) {
+export default async function CityListing({ country }: CityListingProps) {
   const intl = await getIntl()
+  const cities = await getDestinationCityPagesByCountry(country)
+
+  if (!cities.length) {
+    return null
+  }
 
   return (
     <section className={styles.container}>
-      <div className={styles.listHeader}>
+      <div>
         <Subtitle type="two">
           {intl.formatMessage(
             {

components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -11,6 +11,7 @@ import TrackingSDK from "@/components/TrackingSDK"
 
 import ExperienceList from "../ExperienceList"
 import HotelListing from "../HotelListing"
+import HotelListingSkeleton from "../HotelListing/HotelListingSkeleton"
 import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
 import StaticMap from "../StaticMap"
@@ -27,7 +28,7 @@ export default async function DestinationCityPage() {
     return null
   }
 
-  const { tracking, destinationCityPage, hotels } = pageData
+  const { tracking, destinationCityPage, cityIdentifier } = pageData
   const {
     blocks,
     images,
@@ -54,8 +55,9 @@ export default async function DestinationCityPage() {
           />
         </header>
         <main className={styles.mainContent}>
-          <HotelListing hotels={hotels} />
-
+          <Suspense fallback={<HotelListingSkeleton />}>
+            <HotelListing cityIdentifier={cityIdentifier} />
+          </Suspense>
           {blocks && <Blocks blocks={blocks} />}
         </main>
         <aside className={styles.sidebar}>

components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -8,10 +8,9 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
 
 import CityListing from "../CityListing"
+import CityListingSkeleton from "../CityListing/CityListingSkeleton"
 import ExperienceList from "../ExperienceList"
 import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
@@ -23,18 +22,13 @@ import styles from "./destinationCountryPage.module.css"
 import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default async function DestinationCountryPage() {
-  const lang = getLang()
-  const [intl, pageData] = await Promise.all([
-    getIntl(),
-    getDestinationCountryPage(),
-  ])
+  const pageData = await getDestinationCountryPage()
 
   if (!pageData) {
     return null
   }
 
-  const { tracking, destinationCountryPage, cities, translatedCountry } =
-    pageData
+  const { tracking, destinationCountryPage, translatedCountry } = pageData
   const {
     blocks,
     images,
@@ -57,7 +51,9 @@ export default async function DestinationCountryPage() {
           <TopImages images={images} destinationName={translatedCountry} />
         </header>
         <main className={styles.mainContent}>
-          <CityListing cities={cities} />
+          <Suspense fallback={<CityListingSkeleton />}>
+            <CityListing country={destination_settings.country} />
+          </Suspense>
           {blocks && <Blocks blocks={blocks} />}
         </main>
         <aside className={styles.sidebar}>

components/ContentType/DestinationPage/ExperienceList/ExperienceListSkeleton.tsx

@@ -0,0 +1,15 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import styles from "./experienceList.module.css"
+
+export default async function ExperienceListSkeleton() {
+  return (
+    <ul className={styles.experienceList}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <li key={index}>
+          <SkeletonShimmer height="20px" width="80px" />
+        </li>
+      ))}
+    </ul>
+  )
+}

components/ContentType/DestinationPage/HotelListing/Client.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useScrollToTop } from "@/hooks/useScrollToTop"
+
+import HotelListingItem from "./HotelListingItem"
+
+import styles from "./hotelListing.module.css"
+
+import type { HotelData } from "@/types/hotel"
+
+interface HotelListingClientProps {
+  hotels: (HotelData & { url: string | null })[]
+}
+
+export default function HotelListingClient({
+  hotels,
+}: HotelListingClientProps) {
+  const intl = useIntl()
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const showToggleButton = hotels.length > 5
+  const [allHotelsVisible, setAllHotelsVisible] = useState(!showToggleButton)
+  const { showBackToTop, scrollToTop } = useScrollToTop({
+    threshold: 300,
+    elementRef: scrollRef,
+  })
+
+  function handleShowMore() {
+    if (scrollRef.current && allHotelsVisible) {
+      scrollRef.current.scrollIntoView({ behavior: "smooth" })
+    }
+    setAllHotelsVisible((state) => !state)
+  }
+
+  return (
+    <section className={styles.container} ref={scrollRef}>
+      <div className={styles.listHeader}>
+        <Subtitle type="two">
+          {intl.formatMessage(
+            {
+              id: `{count, plural, one {{count} Hotel} other {{count} Hotels}}`,
+            },
+            { count: hotels.length }
+          )}
+        </Subtitle>
+      </div>
+      <ul
+        className={`${styles.hotelList} ${allHotelsVisible ? styles.allVisible : ""}`}
+      >
+        {hotels.map(({ hotel, url }) => (
+          <li key={hotel.name}>
+            <HotelListingItem hotel={hotel} url={url} />
+          </li>
+        ))}
+      </ul>
+      {showToggleButton ? (
+        <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={allHotelsVisible}
+        />
+      ) : null}
+      {showBackToTop && (
+        <BackToTopButton position="center" onClick={scrollToTop} />
+      )}
+    </section>
+  )
+}

components/ContentType/DestinationPage/HotelListing/HotelListingItem/HotelListingItemSkeleton.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import styles from "./hotelListingItem.module.css"
+
+export default function HotelListingItemSkeleton() {
+  return (
+    <article className={styles.container}>
+      <SkeletonShimmer height="100%" width="100%" />
+      <div className={styles.content}>
+        <div className={styles.intro} style={{ width: "100%" }}>
+          <SkeletonShimmer height="24px" width="100px" />
+          <SkeletonShimmer height="35px" width="300px" />
+          <div className={styles.captions}>
+            <SkeletonShimmer height="20px" width="130px" />
+            <SkeletonShimmer height="20px" width="180px" />
+          </div>
+        </div>
+        <div style={{ width: "100%" }}>
+          <SkeletonShimmer height="20px" width="95%" />
+          <SkeletonShimmer height="20px" width="100%" />
+          <SkeletonShimmer height="20px" width="40%" />
+        </div>
+        <ul className={styles.amenityList}>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <li className={styles.amenityItem} key={index}>
+              <SkeletonShimmer height="20px" width="40px" />
+            </li>
+          ))}
+        </ul>
+        <SkeletonShimmer height="40px" width="100px" />
+        <Divider variant="horizontal" color="primaryLightSubtle" />
+        <div className={styles.ctaWrapper}>
+          <SkeletonShimmer height="45px" width="150px" />
+        </div>
+      </div>
+    </article>
+  )
+}

components/ContentType/DestinationPage/HotelListing/HotelListingSkeleton.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import HotelListingItemSkeleton from "./HotelListingItem/HotelListingItemSkeleton"
+
+import styles from "./hotelListing.module.css"
+
+export default function HotelListingSkeleton() {
+  return (
+    <section className={styles.container}>
+      <div className={styles.listHeader}>
+        <SkeletonShimmer height="30px" width="300px" />
+      </div>
+      <ul className={styles.hotelList}>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <HotelListingItemSkeleton key={index} />
+        ))}
+      </ul>
+    </section>
+  )
+}

components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -1,76 +1,19 @@
-"use client"
+import { getHotelListDataByCityIdentifier } from "@/lib/trpc/memoizedRequests"
 
-import { useRef, useState } from "react"
-import { useIntl } from "react-intl"
-
-import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
-import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import { useScrollToTop } from "@/hooks/useScrollToTop"
-
-import HotelListingItem from "./HotelListingItem"
-
-import styles from "./hotelListing.module.css"
-
-import type { HotelData } from "@/types/hotel"
+import HotelListingClient from "./Client"
 
 interface HotelListingProps {
-  hotels: (HotelData & { url: string | null })[]
+  cityIdentifier: string
 }
 
-export default function HotelListing({ hotels }: HotelListingProps) {
-  const intl = useIntl()
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const showToggleButton = hotels.length > 5
-  const [allHotelsVisible, setAllHotelsVisible] = useState(!showToggleButton)
-  const { showBackToTop, scrollToTop } = useScrollToTop({
-    threshold: 300,
-    elementRef: scrollRef,
-  })
+export default async function HotelListing({
+  cityIdentifier,
+}: HotelListingProps) {
+  const hotels = await getHotelListDataByCityIdentifier(cityIdentifier)
 
-  function handleShowMore() {
-    if (scrollRef.current && allHotelsVisible) {
-      scrollRef.current.scrollIntoView({ behavior: "smooth" })
-    }
-    setAllHotelsVisible((state) => !state)
+  if (!hotels.length) {
+    return null
   }
 
-  return (
-    <section className={styles.container} ref={scrollRef}>
-      <div className={styles.listHeader}>
-        <Subtitle type="two">
-          {intl.formatMessage(
-            {
-              id: `{count, plural, one {{count} Hotel} other {{count} Hotels}}`,
-            },
-            { count: hotels.length }
-          )}
-        </Subtitle>
-      </div>
-      <ul
-        className={`${styles.hotelList} ${allHotelsVisible ? styles.allVisible : ""}`}
-      >
-        {hotels.map(({ hotel, url }) => (
-          <li key={hotel.name}>
-            <HotelListingItem hotel={hotel} url={url} />
-          </li>
-        ))}
-      </ul>
-      {showToggleButton ? (
-        <ShowMoreButton
-          loadMoreData={handleShowMore}
-          showLess={allHotelsVisible}
-          textShowMore={intl.formatMessage({
-            id: "Show more",
-          })}
-          textShowLess={intl.formatMessage({
-            id: "Show less",
-          })}
-        />
-      ) : null}
-      {showBackToTop && (
-        <BackToTopButton position="center" onClick={scrollToTop} />
-      )}
-    </section>
-  )
+  return <HotelListingClient hotels={hotels} />
 }