fix(SW-1446): handle empty history and performance better

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/ClientInline/clientInline.module.css

@@ -89,7 +89,7 @@
   border-radius: var(--Corner-radius-Large);
   padding: var(--Space-x2);
   width: 360px;
-  max-height: 430px;
+  max-height: 400px;
   box-sizing: content-box;
   box-shadow: var(--BoxShadow-Level-4);
   position: absolute;

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

@@ -13,7 +13,7 @@ import { useIntl } from "react-intl"
 import { useIsMounted } from "usehooks-ts"
 
 import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Results } from "../Results"
@@ -35,7 +35,8 @@ export function ClientInline({
   const isMounted = useIsMounted()
 
   const showResults = !!results
-  const showHistory = isMounted() && (!results || results.length === 0)
+  const showHistory =
+    latest.length > 0 && isMounted() && (!results || results.length === 0)
 
   return (
     <Autocomplete>
@@ -101,6 +102,7 @@ export function ClientInline({
             </form>
           )}
         </SearchField>
+        {showResults || showHistory ? (
           <div className={styles.results}>
             <div
               className={cx({
@@ -127,6 +129,7 @@ export function ClientInline({
               ) : null}
             </div>
           </div>
+        ) : null}
       </div>
     </Autocomplete>
   )

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

@@ -16,7 +16,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Results } from "../Results"

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/ResultsSkeleton.tsx

@@ -23,51 +23,51 @@ export function ResultsSkeleton() {
       <div>
         <div className={styles.item}>
           <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="50%" />
+            <SkeletonShimmer width="50%" display="inline-block" />
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <div className={styles.itemDescription}>
-              <SkeletonShimmer width="38%" />
+              <SkeletonShimmer width="38%" display="inline-block" />
             </div>
           </Typography>
         </div>
         <div className={styles.item}>
           <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="40%" />
+            <SkeletonShimmer width="40%" display="inline-block" />
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <div className={styles.itemDescription}>
-              <SkeletonShimmer width="23%" />
+              <SkeletonShimmer width="23%" display="inline-block" />
             </div>
           </Typography>
         </div>
         <div className={styles.item}>
           <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="55%" />
+            <SkeletonShimmer width="55%" display="inline-block" />
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <div className={styles.itemDescription}>
-              <SkeletonShimmer width="40%" />
+              <SkeletonShimmer width="40%" display="inline-block" />
             </div>
           </Typography>
         </div>
         <div className={styles.item}>
           <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="27%" />
+            <SkeletonShimmer width="27%" display="inline-block" />
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <div className={styles.itemDescription}>
-              <SkeletonShimmer width="33%" />
+              <SkeletonShimmer width="33%" display="inline-block" />
             </div>
           </Typography>
         </div>
         <div className={styles.item}>
           <Typography variant="Body/Paragraph/mdBold">
-            <SkeletonShimmer width="45%" />
+            <SkeletonShimmer width="45%" display="inline-block" />
           </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <div className={styles.itemDescription}>
-              <SkeletonShimmer width="37%" />
+              <SkeletonShimmer width="37%" display="inline-block" />
             </div>
           </Typography>
         </div>

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

@@ -3,14 +3,16 @@
 import {
   Collection,
   Header,
+  ListLayout,
   Menu,
   MenuItem,
   MenuSection,
   Text,
+  Virtualizer,
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./results.module.css"
@@ -25,6 +27,13 @@ export function Results({
   const intl = useIntl()
 
   return (
+    <Virtualizer
+      layout={ListLayout}
+      layoutOptions={{
+        estimatedRowHeight: 64,
+        estimatedHeadingHeight: 41,
+      }}
+    >
       <Menu
         aria-label={ariaLabel}
         onAction={onAction}
@@ -38,7 +47,9 @@ export function Results({
           if (section.id === "actions") {
             return (
               <MenuSection key={section.id} className={styles.actionsSection}>
-              <Header className="sr-only">{section.name}</Header>
+                <Header className={styles.menuDivider}>
+                  <span className="sr-only">{section.name}</span>
+                </Header>
                 <Collection items={section.children}>
                   {(item) => (
                     <MenuItem
@@ -101,5 +112,6 @@ export function Results({
           )
         }}
       </Menu>
+    </Virtualizer>
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/results.module.css

@@ -1,13 +1,20 @@
 .menu {
-  display: flex;
+  height: 100%;
-  flex-direction: column;
+  overflow-y: auto;
-  gap: var(--Space-x2);
 }
 
 .sectionHeader {
   color: var(--UI-Text-Placeholder);
   padding-left: var(--Space-x1);
   padding-bottom: var(--Space-x05);
+
+  /* Due to Virtualizer we cannot use gap in .menu,
+  instead we use padding-top on each section header */
+  padding-top: var(--Space-x2);
+  /* Except for the first section header */
+  .menu > div > div:first-child & {
+    padding-top: 0;
+  }
 }
 
 .item {
@@ -45,9 +52,16 @@
   color: var(--Text-Tertiary);
 }
 
-.actionsSection {
+.menuDivider {
-  border-top: solid 1px var(--Border-Divider-Subtle);
+  padding-top: var(--Space-x2);
-  padding-top: var(--Space-x2); /* match gap of .menu */
+  padding-bottom: var(--Space-x2);
+}
+
+.menuDivider:before {
+  display: block;
+  content: "";
+  height: 1px;
+  background: var(--Border-Divider-Subtle);
 }
 
 .actionsSection .item {