Consulting pages - Total Blocking time (#3230)

* App Routing - Consulting page

Affected Route: `/consulting`

Fixed: #3162

Screenshot:
TODO

* Adding animation for the consulting page

* Fixing the static path for the consulting pages

* Optimizing it for generic component

* removing unused prop from the server component

* Fixing Tina editing with the template

* Adding marketing props

* removing unused component

* removing client side rendering for tech cards

* Adding categories from the server side

* adding mediaCardsProps from server

* removing unused component import

* creating a generic component for props and tinaProp

* testing - removing useEffect for the animation

* Revert "testing - removing useEffect for the animation"

This reverts commit d63919b.

* Testing without prefetch

* Revert "Testing without prefetch"

This reverts commit 192616e.

* removing the additional font weight from the parent component

* Fixing the layout shifting issue with the banner

* fixing the placeholder for breadcrumb

* Adding video on the client size after the load

* Moving Video Embed on the client side

* loading the chatbot on the pure client side

* Revert "loading the chatbot on the pure client side"

This reverts commit 9197095.

* Adding video back to component

* Converting image types to WebP

* Converting import types to client to improve performance

* adding breadcrumb to dynamic import

* tree shaking for headlessUI library

* Revert "tree shaking for headlessUI library"

This reverts commit 6b84395.

* optimizing the package for headlessui

* optimizing ssw.megamenu and adding sourcemaps

* adding technologies card images on the client side

* Adding tailwind jid mode

* removing unused packages

* testing - prefetch for the homepage

* removing background video for the mobile devices

* Revert "testing - prefetch for the homepage"

This reverts commit dfb277f.

* removing unused imports

* Fixing the video loading on mobile

* Fixing the video on the mobile rendering

* Fixing the about us for mobile

* fixing the cumulative shift of carousel

* Adding placeholder image to avoid cumulative shift

* Adding prefetch logic for home page

* Changing the logic for mobile

* Revert "Adding placeholder image to avoid cumulative shift"

This reverts commit 866cc5d.

* reverting the changes for marketing component

* fixing the import path

* Adding the icon and image with dynamic

* Adding social icons to client side

* removing react icons from the regular import

* Fixing the issue with default import for social icon type

* adding twitter icon from dynamic import

* removing prefetch

* removing unused pathname import

* update pnpm-lock

* Update tina-lock.json

* reverting changes in social icons

* removing whitespace

* reverting the change for the azure and client logos

* adding client size side image rendering for azure banner

* reverting change for the consulting index

* Fixing server side rendering to reduce the load on client side

* removing dynamic importing for react-icon

* fixing the image import to server side

* removing breadcrumb from the home page

* Update tina-lock.json

app/page-content.tsx

@@ -2,8 +2,6 @@ import { Blocks } from "@/components/blocks-renderer";
 import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
 import { Container } from "@/components/util/container";
 import { Section } from "@/components/util/section";
-import { removeExtension } from "@/services/client/utils.service";
-import { Breadcrumbs } from "app/components/breadcrumb";
 import classNames from "classnames";
 import { useEffect, useMemo } from "react";
 import { WebSite, WithContext } from "schema-dts";
@@ -42,15 +40,6 @@ export default function PageContent({ props }) {
   }, [structuredData]);
   return (
     <>
-      {data.page.breadcrumbs && (
-        <Section className="mx-auto w-full max-w-9xl px-8 py-5">
-          <Breadcrumbs
-            path={removeExtension(props.variables.relativePath)}
-            suffix={data.global.breadcrumbSuffix}
-            title={data.page.seo?.title}
-          />
-        </Section>
-      )}
       {data.page?.title && (
         <Section
           className="mx-auto w-full max-w-9xl px-8"

components/blocks/aboutUs.tsx

@@ -119,10 +119,9 @@ export const AboutUs = ({ data }) => {
         data-tina-field={tinaField(data, aboutUsBlock.backgroundColor)}
       >
         <div className="grid grid-cols-3 gap-6">
-          <TV
-            className="col-span-3 max-md:hidden sm:col-span-1"
-            isMobile={isMobile}
-          />
+          {!isMobile && (
+            <TV className="col-span-3 max-md:hidden sm:col-span-1" />
+          )}
           <div className="col-span-3 md:col-span-2">
             <div
               className={`grid grid-cols-1 gap-6 ${!data.hideMap ? "sm:grid-cols-2" : ""}`}
@@ -139,7 +138,7 @@ export const AboutUs = ({ data }) => {
                 setMapClickedTrigger={setMapClickedTrigger}
                 mapClickedTrigger={mapClickedTrigger}
               />
-              {(data.showMap ?? true) && (
+              {(data.showMap ?? true) && !isMobile && (
                 <Map
                   className="hidden sm:block"
                   offices={offices}
@@ -150,7 +149,6 @@ export const AboutUs = ({ data }) => {
                   setStateBeingHovered={setStateBeingHovered}
                   setMapHoveredTrigger={setMapHoveredTrigger}
                   setMapClickedTrigger={setMapClickedTrigger}
-                  isMobile={isMobile}
                 />
               )}
             </div>
@@ -161,16 +159,7 @@ export const AboutUs = ({ data }) => {
   );
 };
 
-const TV = memo(function TV({
-  className,
-  isMobile,
-}: {
-  className?: string;
-  isMobile: boolean;
-}) {
-  if (isMobile) {
-    return null;
-  }
+const TV = memo(function TV({ className }: { className?: string }) {
   return (
     <div className={className}>
       <h2 className="mt-0">tv.ssw.com</h2>
@@ -369,11 +358,7 @@ const Map = ({
   setStateBeingHovered,
   setMapHoveredTrigger,
   setMapClickedTrigger,
-  isMobile,
 }) => {
-  if (isMobile) {
-    return null;
-  }
   return (
     <div className={className}>
       <h2 className="mt-0">&nbsp;</h2>

components/blocks/bigCardContent.tsx

@@ -4,7 +4,7 @@ import { tinaField } from "tinacms/dist/react";
 import { CustomLink } from "../customLink";
 import { serviceCards } from "./serviceCards";
 
-const Image = dynamic(() => import("next/image"), { ssr: false });
+const Image = dynamic(() => import("next/image"));
 
 interface BigCardContentProps {
   card: {

components/blocks/booking.tsx

@@ -1,17 +1,24 @@
+import useIsMobile from "hooks/useIsMobile";
+import dynamic from "next/dynamic";
 import { FC } from "react";
 import { FaAngleDown } from "react-icons/fa";
 import { tinaField } from "tinacms/dist/react";
 import { sanitiseXSS, spanWhitelist } from "../../helpers/validator";
 import { CustomLink } from "../customLink";
 import { Container } from "../util/container";
-import VideoBackground from "./videoBackground";
+
+const VideoBackground = dynamic(() => import("./videoBackground"), {
+  ssr: false,
+});
 
 export const Booking: FC<{
   title?: string;
   subTitle?: string;
   videoBackground?: string;
   children: React.ReactNode;
 }> = (props) => {
+  const isMobile = useIsMobile();
+
   return (
     <div className="flex w-full items-center text-center font-light after:absolute after:size-full after:bg-black/75 after:bg-video-mask after:z-videoMask">
       <Container padding="px-4" className="w-full z-content">
@@ -34,11 +41,13 @@ export const Booking: FC<{
         </div>
       </Container>
 
-      <VideoBackground
-        videoBackground={props.videoBackground}
-        tinaField={tinaField}
-        props={props}
-      />
+      {!isMobile && (
+        <VideoBackground
+          videoBackground={props.videoBackground}
+          tinaField={tinaField}
+          props={props}
+        />
+      )}
     </div>
   );
 };

components/blocks/builtOnAzure.tsx

@@ -1,11 +1,13 @@
 import classNames from "classnames";
-import Image from "next/image";
+import dynamic from "next/dynamic";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
 import { CustomLink } from "../customLink";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 
+const Image = dynamic(() => import("next/image"));
+
 export const BuiltOnAzure = ({ data }) => {
   return (
     <Section color={data.backgroundColor}>
@@ -21,6 +23,7 @@ export const BuiltOnAzure = ({ data }) => {
               alt="Microsoft Azure Logo"
               height={30}
               width={30}
+              loading="lazy"
             />
           }
         />
@@ -36,6 +39,7 @@ export const BuiltOnAzure = ({ data }) => {
               alt="TinaCMS logo"
               height={30}
               width={22}
+              loading="lazy"
             />
           }
         />

components/blocks/carousel.tsx

@@ -1,12 +1,11 @@
-"use client";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import * as React from "react";
+import { isMobile } from "react-device-detect";
 import { tinaField } from "tinacms/dist/react";
 
 import type { Template } from "tinacms";
 
-import useIsMobile from "../../hooks/useIsMobile";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 
@@ -16,7 +15,6 @@ import { Carousel as CarouselImplementation } from "react-responsive-carousel";
 
 export const Carousel = ({ data }) => {
   const router = useRouter();
-  const isMobile = useIsMobile();
 
   if (!data.showOnMobileDevices && isMobile) {
     return null;

components/blocks/clientLogos.tsx

@@ -2,7 +2,7 @@ import dynamic from "next/dynamic";
 import type { Template } from "tinacms";
 import layoutData from "../../content/global/index.json";
 
-const Image = dynamic(() => import("next/image"), { ssr: false });
+const Image = dynamic(() => import("next/image"));
 
 const clientsData = layoutData.clients.clientsList;
 

components/blocks/mdxComponentRenderer.tsx

@@ -31,11 +31,13 @@ const AgreementForm = dynamic(() =>
 const TrainingInformation = dynamic(() =>
   import("../training/trainingInformation").then((mod) => mod.default)
 );
+
 const TrainingLearningOutcome = dynamic(() =>
   import("../training/trainingLearningOutcome").then(
     (mod) => mod.TrainingLearningOutcome
   )
 );
+
 const CustomDownloadButton = dynamic(() =>
   import("./CustomDownloadButton").then((mod) => mod.CustomDownloadButton)
 );
@@ -48,6 +50,7 @@ const Citation = dynamic(() =>
 const ClientLogos = dynamic(() =>
   import("./clientLogos").then((mod) => mod.ClientLogos)
 );
+
 const ColorBlock = dynamic<ColorBlockProps>(() =>
   import("./colorBlock").then((mod) => mod.ColorBlock)
 );
@@ -76,12 +79,15 @@ const FixedTabsLayout = dynamic(() =>
   import("./fixedTabsLayout").then((mod) => mod.FixedTabsLayout)
 );
 const Flag = dynamic(() => import("./flag").then((mod) => mod.Flag));
+
 const ColorPalette = dynamic(() =>
   import("./colorPalette").then((mod) => mod.ColorPalette)
 );
-const GoogleMapsWrapper = dynamic(() =>
-  import("./googleMapsWrapper").then((mod) => mod.GoogleMapsWrapper)
+const GoogleMapsWrapper = dynamic(
+  () => import("./googleMapsWrapper").then((mod) => mod.GoogleMapsWrapper),
+  { ssr: false }
 );
+
 const InlineJotForm = dynamic(() =>
   import("../inlineJotForm/inlineJotForm").then((mod) => mod.InlineJotForm)
 );

components/blocks/serviceCards.tsx

@@ -1,6 +1,6 @@
 import { tinaField } from "tinacms/dist/react";
 
-const Image = dynamic(() => import("next/image"), { ssr: false });
+const Image = dynamic(() => import("next/image"));
 
 import type { Template } from "tinacms";
 

components/blocks/testimonialsCard.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import Image from "next/image";
+import dynamic from "next/dynamic";
 import { useState } from "react";
 import { TestimonialType } from "../../helpers/getTestimonials";
 
+const Image = dynamic(() => import("next/image"));
+
 const defaultAvatar = "/images/thumbs/avatar-thumbnail.png";
 
 type TestimonialCardProps = {

components/customLink.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import React, { PropsWithChildren } from "react";
 
 interface CustomLinkProps extends PropsWithChildren {
@@ -40,6 +43,9 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
   const isExternal = isExternalLink(href);
   const isAnSSWBrandedSite = isExternalSSWSite(href) || isTinaSite(href);
 
+  const path = usePathname();
+  const isHomePage = path === "/"; // Check if current page is the homepage
+
   if (!href) return <>{children}</>;
   return (
     <>
@@ -63,6 +69,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
           title={title}
           {...props}
           style={style}
+          prefetch={!isHomePage}
         >
           {children}
         </Link>

components/technologyCard/technologyCard.tsx

@@ -1,10 +1,12 @@
-import Image from "next/image";
+import dynamic from "next/dynamic";
 import { FC } from "react";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { CustomLink } from "../customLink";
 import { TechnologyCardProps } from "./technologyCardTypes";
 
+const Image = dynamic(() => import("next/image"));
+
 const TechnologyCard: FC<TechnologyCardProps> = (props) => {
   const { name, readMoreSlug, thumbnail, body } = props;
   return (
@@ -18,7 +20,7 @@ const TechnologyCard: FC<TechnologyCardProps> = (props) => {
           data-tina-field={tinaField(props, "thumbnail")}
         >
           <Image
-            src={thumbnail || "/images/ssw-logo.svg"}
+            src={thumbnail || "/images/ssw-logo.webp"}
             alt={thumbnail ? name : "SSW Consulting"}
             fill
             className="object-contain"

components/util/consulting/benefits.tsx

@@ -4,7 +4,7 @@ import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { CustomLink } from "../../customLink";
 
-const Image = dynamic(() => import("next/image"), { ssr: true });
+const Image = dynamic(() => import("next/image"));
 
 const BenefitCard = (props) => {
   const { image, title, description, linkURL, linkName } = props.data;

components/videoModal.tsx

@@ -2,28 +2,25 @@
 
 import classNames from "classnames";
 import dynamic from "next/dynamic";
-import Image from "next/image";
 import { useEffect, useState } from "react";
+
 import { FaPlayCircle } from "react-icons/fa";
+
 import {
   MATCH_URL_VIMEO,
   MATCH_URL_YOUTUBE,
   getVimeoId,
   getYouTubeId,
 } from "../helpers/embeds";
 
-const YouTubeEmbed = dynamic(
-  () => import("./embeds/youtubeEmbed").then((mod) => mod.YouTubeEmbed),
-  {
-    ssr: false,
-  }
+const Image = dynamic(() => import("next/image"));
+
+const YouTubeEmbed = dynamic(() =>
+  import("./embeds/youtubeEmbed").then((mod) => mod.YouTubeEmbed)
 );
 
-const VimeoEmbed = dynamic(
-  () => import("./embeds/vimeoEmbed").then((mod) => mod.VimeoEmbed),
-  {
-    ssr: false,
-  }
+const VimeoEmbed = dynamic(() =>
+  import("./embeds/vimeoEmbed").then((mod) => mod.VimeoEmbed)
 );
 
 type VideoModalProps = {

content/marketing/dressing-down.mdx

@@ -1,6 +1,6 @@
 ---
 title: <span class="text-sswRed">Dressing down</span> (aka casual Fridays)?
-backgroundImage: /images/marketings/sswMarketingBackground.jpg
+backgroundImage: /images/marketings/sswMarketingBackground.webp
 mediaComponent: >-
   ![Dress code graphic](/images/Employment/dresscode.png)
 textSide: left
@@ -10,7 +10,7 @@ We have a dress-down code or a "devolution" as we call it! It's
 something to look forward to and we can physically see the week
 counting down to Friday!
 
-Our employees dress up on Mondays and Tuesdays by wearing company colors, and 
+Our employees dress up on Mondays and Tuesdays by wearing company colors, and
 dress down later with a casual Thursday and Friday.
 
 More on [Do you follow the company's dress code?](https://www.ssw.com.au/rules/do-you-have-a-dress-code)

content/marketing/why-choose-ssw.mdx

@@ -1,6 +1,6 @@
 ---
 title: Why should you choose <span class="text-sswRed">SSW</span>?
-backgroundImage: /images/marketings/sswMarketingBackground.jpg
+backgroundImage: /images/marketings/sswMarketingBackground.webp
 mediaComponent: >
   <VideoEmbed removeMargin={true}
   url="https://www.youtube.com/watch?v=Jveq6VFjWTA" videoWidth="w-full"

hooks/useIsMobile.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 const useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(true);
 
   useEffect(() => {
     // Check if the window width is less than or equal to the given breakpoint