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} />
 }

lib/trpc/memoizedRequests/index.ts

@@ -2,6 +2,7 @@ import { cache } from "@/utils/cache"
 
 import { serverClient } from "../server"
 
+import type { Country } from "@/types/enums/country"
 import type {
   BreackfastPackagesInput,
   PackagesInput,
@@ -198,11 +199,27 @@ export const getDestinationCountryPage = cache(
     return serverClient().contentstack.destinationCountryPage.get()
   }
 )
+export const getDestinationCityPagesByCountry = cache(
+  async function getMemoizedDestinationCityPagesByCountry(country: Country) {
+    return serverClient().contentstack.destinationCountryPage.cityPages({
+      country,
+    })
+  }
+)
 export const getDestinationCityPage = cache(
   async function getMemoizedDestinationCityPage() {
     return serverClient().contentstack.destinationCityPage.get()
   }
 )
+export const getHotelListDataByCityIdentifier = cache(
+  async function getMemoizedHotelListDataByCityIdentifier(
+    cityIdentifier: string
+  ) {
+    return serverClient().contentstack.destinationCityPage.hotelList({
+      cityIdentifier,
+    })
+  }
+)
 
 export const getStartPage = cache(async function getMemoizedStartPage() {
   return serverClient().contentstack.startPage.get()

server/routers/contentstack/destinationCityPage/input.ts

@@ -0,0 +1,5 @@
+import { z } from "zod"
+
+export const getHotelListDataInput = z.object({
+  cityIdentifier: z.string(),
+})

server/routers/contentstack/destinationCityPage/query.ts

@@ -8,6 +8,8 @@ import { contentStackUidWithServiceProcedure, router } from "@/server/trpc"
 
 import { generateTag } from "@/utils/generateTag"
 
+import { getHotelListData } from "../../hotels/utils"
+import { getHotelListDataInput } from "./input"
 import {
   destinationCityPageRefsSchema,
   destinationCityPageSchema,
@@ -20,7 +22,7 @@ import {
   getDestinationCityPageRefsSuccessCounter,
   getDestinationCityPageSuccessCounter,
 } from "./telemetry"
-import { generatePageTags, getHotelListData } from "./utils"
+import { generatePageTags } from "./utils"
 
 import type {
   GetDestinationCityPageData,
@@ -147,12 +149,6 @@ export const destinationCityPageQueryRouter = router({
       return null
     }
 
-    const hotels = await getHotelListData(
-      lang,
-      serviceToken,
-      validatedResponse.data.destinationCityPage.destination_settings.city
-    )
-
     getDestinationCityPageSuccessCounter.add(1, { lang, uid: `${uid}` })
     console.info(
       "contentstack.destinationCityPage success",
@@ -163,7 +159,18 @@ export const destinationCityPageQueryRouter = router({
 
     return {
       ...validatedResponse.data,
-      hotels,
+      cityIdentifier:
+        validatedResponse.data.destinationCityPage.destination_settings.city,
     }
   }),
+  hotelList: contentStackUidWithServiceProcedure
+    .input(getHotelListDataInput)
+    .query(async ({ ctx, input }) => {
+      const { lang, serviceToken } = ctx
+      const { cityIdentifier } = input
+
+      const hotels = await getHotelListData(lang, serviceToken, cityIdentifier)
+
+      return hotels
+    }),
 })

server/routers/contentstack/destinationCityPage/utils.ts

@@ -1,11 +1,6 @@
 import { generateTag, generateTagsFromSystem } from "@/utils/generateTag"
 
-import { getHotel } from "../../hotels/query"
-import { getHotelIdsByCityIdentifier } from "../../hotels/utils"
-import { getHotelPageUrl } from "../hotelPage/utils"
-
 import { DestinationCityPageEnum } from "@/types/enums/destinationCityPage"
-import type { HotelData } from "@/types/hotel"
 import type { System } from "@/types/requests/system"
 import type { DestinationCityPageRefs } from "@/types/trpc/routers/contentstack/destinationCityPage"
 import type { Lang } from "@/constants/languages"
@@ -56,29 +51,3 @@ export function getConnections({
 
   return connections
 }
-
-export async function getHotelListData(
-  lang: Lang,
-  serviceToken: string,
-  cityIdentifier: string
-) {
-  const hotelIds = await getHotelIdsByCityIdentifier(
-    cityIdentifier,
-    serviceToken
-  )
-
-  const hotels = await Promise.all(
-    hotelIds.map(async (hotelId) => {
-      const [hotelData, url] = await Promise.all([
-        getHotel({ hotelId, language: lang }, serviceToken),
-        getHotelPageUrl(lang, hotelId),
-      ])
-
-      return hotelData ? { ...hotelData, url } : null
-    })
-  )
-
-  return hotels.filter(
-    (hotel): hotel is HotelData & { url: string | null } => !!hotel
-  )
-}

server/routers/contentstack/destinationCountryPage/input.ts

@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+import { Country } from "@/types/enums/country"
+
+export const getCityPagesInput = z.object({
+  country: z.nativeEnum(Country),
+})

server/routers/contentstack/destinationCountryPage/query.ts

@@ -4,11 +4,16 @@ import {
 } from "@/lib/graphql/Query/DestinationCountryPage/DestinationCountryPage.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
-import { contentStackUidWithServiceProcedure, router } from "@/server/trpc"
+import {
+  contentStackBaseWithServiceProcedure,
+  contentStackUidWithServiceProcedure,
+  router,
+} from "@/server/trpc"
 import { toApiLang } from "@/server/utils"
 
 import { generateTag } from "@/utils/generateTag"
 
+import { getCityPagesInput } from "./input"
 import {
   destinationCountryPageRefsSchema,
   destinationCountryPageSchema,
@@ -151,12 +156,8 @@ export const destinationCountryPageQueryRouter = router({
       )
       return null
     }
-
-    const cities = await getCityPages(
-      lang,
-      serviceToken,
+    const country =
       validatedResponse.data.destinationCountryPage.destination_settings.country
-    )
 
     getDestinationCountryPageSuccessCounter.add(1, { lang, uid: `${uid}` })
     console.info(
@@ -168,12 +169,17 @@ export const destinationCountryPageQueryRouter = router({
 
     return {
       ...validatedResponse.data,
-      translatedCountry:
-        ApiCountry[lang][
-          validatedResponse.data.destinationCountryPage.destination_settings
-            .country
-        ],
-      cities,
+      translatedCountry: ApiCountry[lang][country],
     }
   }),
+  cityPages: contentStackBaseWithServiceProcedure
+    .input(getCityPagesInput)
+    .query(async ({ ctx, input }) => {
+      const { lang, serviceToken } = ctx
+      const { country } = input
+
+      const cities = await getCityPages(lang, serviceToken, country)
+
+      return cities
+    }),
 })

server/routers/hotels/utils.ts

@@ -6,6 +6,7 @@ import { env } from "@/env/server"
 import * as api from "@/lib/api"
 import { toApiLang } from "@/server/utils"
 
+import { getHotelPageUrl } from "../contentstack/hotelPage/utils"
 import { metrics } from "./metrics"
 import {
   citiesByCountrySchema,
@@ -14,10 +15,12 @@ import {
   getHotelIdsSchema,
   locationsSchema,
 } from "./output"
+import { getHotel } from "./query"
 
 import type { Country } from "@/types/enums/country"
 import { PointOfInterestGroupEnum } from "@/types/enums/pointOfInterest"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
+import type { HotelData } from "@/types/hotel"
 import type {
   CitiesGroupedByCountry,
   CityLocation,
@@ -477,3 +480,29 @@ export async function getCityIdByCityIdentifier(
 
   return cityId ?? null
 }
+
+export async function getHotelListData(
+  lang: Lang,
+  serviceToken: string,
+  cityIdentifier: string
+) {
+  const hotelIds = await getHotelIdsByCityIdentifier(
+    cityIdentifier,
+    serviceToken
+  )
+
+  const hotels = await Promise.all(
+    hotelIds.map(async (hotelId) => {
+      const [hotelData, url] = await Promise.all([
+        getHotel({ hotelId, language: lang }, serviceToken),
+        getHotelPageUrl(lang, hotelId),
+      ])
+
+      return hotelData ? { ...hotelData, url } : null
+    })
+  )
+
+  return hotels.filter(
+    (hotel): hotel is HotelData & { url: string | null } => !!hotel
+  )
+}