fix: skeletons for headers to avoid data fetching

app/globals.css

@@ -102,7 +102,7 @@
   --max-width: 94.5rem;
   --max-width-content: 74.75rem;
   --max-width-text-block: 49.5rem;
-  --current-mobile-site-header-height: 70.047px;
+  --current-mobile-site-header-height: 52.41px;
   --max-width-navigation: 89.5rem;
 
   --max-width-spacing: calc(var(--Layout-Mobile-Margin-Margin-min) * 2);

components/Current/Header/BookingButton/bookingButton.module.css

@@ -6,7 +6,7 @@
   line-height: 20px;
   border: 1px solid transparent;
   border-radius: 50px;
-  height: 32px;
+  height: 38px;
   line-height: 20px;
   font-size: 14px;
   font-family: Helvetica, Arial, sans-serif;
@@ -17,6 +17,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  align-content: center;
 }
 
 .button:hover {

components/Current/Header/HeaderFallback/index.tsx

@@ -1,49 +1,13 @@
-import { homeHrefs } from "@/constants/homeHrefs"
+import { MainMenuSkeleton } from "../MainMenu"
-import { env } from "@/env/server"
+import { TopMenuSkeleton } from "../TopMenu"
-import { getCurrentHeader } from "@/lib/trpc/memoizedRequests"
-
-import { getLang } from "@/i18n/serverContext"
-
-import { MainMenu } from "../MainMenu"
-import OfflineBanner from "../OfflineBanner"
-import TopMenu from "../TopMenu"
 
 import styles from "../header.module.css"
 
 export default async function HeaderFallback() {
-  const data = await getCurrentHeader(getLang())
-
-  if (!data?.header) {
-    return null
-  }
-
-  const homeHref = homeHrefs[env.NODE_ENV][getLang()]
-  const { frontpageLinkText, logo, menu, topMenu } = data.header
-
-  const topMenuMobileLinks = topMenu.links
-    .filter((link) => link.show_on_mobile)
-    .sort((a, b) => (a.sort_order_mobile < b.sort_order_mobile ? 1 : -1))
-
   return (
     <header className={styles.header} role="banner">
-      <OfflineBanner />
+      <TopMenuSkeleton />
-      <TopMenu
+      <MainMenuSkeleton />
-        frontpageLinkText={frontpageLinkText}
-        homeHref={homeHref}
-        links={topMenu.links}
-        languageSwitcher={null}
-      />
-      <MainMenu
-        frontpageLinkText={frontpageLinkText}
-        homeHref={homeHref}
-        links={menu.links}
-        logo={logo}
-        topMenuMobileLinks={topMenuMobileLinks}
-        languageSwitcher={null}
-        myPagesMobileDropdown={null}
-        bookingHref={homeHref}
-        user={null}
-      />
     </header>
   )
 }

components/Current/Header/MainMenu/index.tsx

@@ -9,6 +9,7 @@ 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"
@@ -227,3 +228,56 @@ export function MainMenu({
     </div>
   )
 }
+
+export function MainMenuSkeleton() {
+  const intl = useIntl()
+
+  const links = new Array(5).fill("")
+  return (
+    <div className={styles.mainMenu}>
+      <div
+        className={styles.container}
+        itemScope
+        itemType="http://schema.org/Organization"
+      >
+        <meta itemProp="name" content="Scandic" />
+        <nav className={styles.navBar}>
+          <button
+            aria-pressed="false"
+            className={styles.expanderBtn}
+            type="button"
+          >
+            <span className={styles.iconBars}></span>
+            <span className={styles.hiddenAccessible}>Menu</span>
+          </button>
+
+          <a className={styles.logoLink} href={""}>
+            <Image
+              alt="Scandic Hotels logo"
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              itemProp="logo"
+              height={20}
+              src={"/_static/img/scandic-logotype.png"}
+              width={200}
+            />
+          </a>
+
+          <ul className={styles.listWrapper}>
+            {links.map((link, i) => (
+              <li
+                className={`${styles.li} ${styles.skeletonWrapper}`}
+                key={link.href + i}
+              >
+                <SkeletonShimmer height="22px" width="130px" />
+              </li>
+            ))}
+          </ul>
+          <div className={styles.buttonContainer}>
+            <BookingButton href={""} />
+          </div>
+        </nav>
+      </div>
+    </div>
+  )
+}

components/Current/Header/MainMenu/mainMenu.module.css

@@ -27,11 +27,9 @@
 .navBar {
   display: grid;
   grid-template-columns: 1fr 80px 1fr;
-  grid-template-columns: auto auto 1fr auto;
   grid-template-areas: "expanderBtn logoLink . buttonContainer";
   grid-template-rows: 100%;
   height: 100%;
-  padding: 0 var(--Spacing-x2);
 }
 
 .expanderBtn {
@@ -50,7 +48,7 @@
   background: #757575;
   border-radius: 2.3px;
   display: inline-block;
-  height: 3px;
+  height: 5px;
   position: relative;
   transition: 0.3s;
   width: 32px;
@@ -107,7 +105,6 @@
   align-items: center;
   height: 100%;
   width: 80px;
-  padding-left: var(--Spacing-x1);
 }
 
 .logo {
@@ -241,6 +238,12 @@
   display: none;
 }
 
+.skeletonWrapper {
+  padding: 4px 10px;
+  height: 100%;
+  align-content: center;
+}
+
 @media (min-width: 1367px) {
   .navBar {
     grid-template-columns: 140px auto 1fr;

components/Current/Header/TopMenu/index.tsx

@@ -3,6 +3,7 @@ import { overview } from "@/constants/routes/myPages"
 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"
@@ -68,6 +69,8 @@ export default async function TopMenu({
                 position="hamburger menu"
                 trackingId="loginStartTopMenu"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
+                variant="default"
+                size="small"
               >
                 {intl.formatMessage({ id: "Log in" })}
               </LoginButton>
@@ -78,3 +81,32 @@ export default async function TopMenu({
     </div>
   )
 }
+
+export async function TopMenuSkeleton() {
+  const intl = await getIntl()
+  const links = new Array(5).fill("")
+  return (
+    <div className={styles.topMenu}>
+      <div className={styles.container}>
+        <ul className={styles.list}>
+          {links.map((link, i) => (
+            <li key={link.href + i} className={styles.skeletonWrapper}>
+              <SkeletonShimmer width="100px" height="16px" />
+            </li>
+          ))}
+          <li className={styles.sessionContainer}>
+            <LoginButton
+              position="hamburger menu"
+              trackingId="loginStartTopMenu"
+              className={`${styles.sessionLink} ${styles.loginLink}`}
+              variant="default"
+              size="small"
+            >
+              {intl.formatMessage({ id: "Log in" })}
+            </LoginButton>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}

components/Current/Header/TopMenu/topMenu.module.css

@@ -49,6 +49,12 @@
   display: block;
 }
 
+.skeletonWrapper {
+  padding: 4px 10px;
+  height: 30px;
+  align-content: center;
+}
+
 @media screen and (min-width: 768px) {
   .container {
     padding: 0 30px;