Event Pages - Largest Contentful Paint (#3277)

* Events - Removing the search Param

* Removing reducer

* removing redundant code

* removing unused reducer import

* Adding placeholder image for the events

* Adding lazy loading for the images

* adding minimum height for the timing

* Adding query param feature

* Adding breadcrumb

* fixing mobile view

* removing query param

* Adding bluredBase 64 image

* removing unused func

* Adding the blurred image for the events

* fixing the image import path

* Adding search param for client rendering

* Adding some spaces for mobile view on relative timings

* removing unused placeholder image

* Updating the comment

* Events page - Largest Contentful Paint

Affected route: `/events/*`

* Removing layoutshifting on the page

* splitting the client side code

* updating the deprecated prop

* fixing the prop for the video card

app/events/[filename]/index.tsx

@@ -1,18 +1,28 @@
 "use client";
 
 import { Blocks } from "@/components/blocks-renderer";
-import { ClientLogos } from "@/components/blocks/clientLogos";
 import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
 import EventsHeader from "@/components/events/eventsHeader";
-import { TestimonialRow } from "@/components/testimonials/TestimonialRow";
 import { Container } from "@/components/util/container";
 import { Section } from "@/components/util/section";
-import VideoCards from "@/components/util/videoCards";
 import { removeExtension } from "@/services/client/utils.service";
 import { Breadcrumbs } from "app/components/breadcrumb";
+import dynamic from "next/dynamic";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 
+const ClientLogos = dynamic(() =>
+  import("@/components/blocks/clientLogos").then((mod) => mod.ClientLogos)
+);
+
+const TestimonialRow = dynamic(() =>
+  import("@/components/testimonials/TestimonialRow").then(
+    (mod) => mod.TestimonialRow
+  )
+);
+
+const VideoCards = dynamic(() => import("@/components/util/videoCards"));
+
 export default function EventsPage({ props, tinaProps }) {
   const { data } = tinaProps;
 

components/blocks-renderer.tsx

@@ -13,9 +13,7 @@ const AboutUs = dynamic(() =>
   import("./blocks/aboutUs").then((mod) => mod.AboutUs)
 );
 
-const Agenda = dynamic(() =>
-  import("./blocks/agenda").then((mod) => mod.Agenda)
-);
+import { Agenda } from "./blocks/agenda";
 
 const BuiltOnAzure = dynamic(() =>
   import("./blocks/builtOnAzure").then((mod) => mod.BuiltOnAzure)
@@ -91,9 +89,7 @@ const LatestTech = dynamic(() =>
   import("./usergroup/latestTech").then((mod) => mod.LatestTech)
 );
 
-const EventBooking = dynamic(() =>
-  import("./training/eventBooking").then((mod) => mod.EventBooking)
-);
+import { EventBooking } from "./training/eventBooking";
 
 const InterestForm = dynamic(
   () => import("./events/interestForm").then((mod) => mod.InterestForm),

components/blocks/content.tsx

@@ -50,6 +50,7 @@ export const Content = ({ data }: ContentProps) => {
     <Section
       color={data.backgroundColor}
       data-tina-field={tinaField(data, contentBlock.title)}
+      className="px-8 md:px-0"
     >
       <Container
         size="medium"

components/events/eventsHeader.tsx

@@ -1,27 +1,19 @@
-import Image, { getImageProps } from "next/image";
-import { getBackgroundImage } from "../../helpers/images";
+import Image from "next/image";
 import { Section } from "../util/section";
 
 const EventsHeader = ({ data }) => {
-  const {
-    props: { srcSet },
-  } = getImageProps({
-    src: data?.heroBackground || "/images/polygonBackground.png",
-    alt: "Events header background",
-    height: 724,
-    width: 1728,
-  });
-  const backgroundImage = getBackgroundImage(srcSet);
-
   return (
-    <Section
-      className="flex h-102 items-center justify-center border-b-8 border-sswRed bg-white bg-cover bg-no-repeat"
-      style={{
-        backgroundImage,
-      }}
-    >
+    <Section className="relative flex h-102 items-center justify-center border-b-8 border-sswRed">
+      <Image
+        src={data?.heroBackground || "/images/polygonBackground.png"}
+        alt={data?.altText || "Events header background"}
+        fill
+        className="bg-contain bg-no-repeat"
+        sizes="(max-width: 768px) 50vw, 1728px"
+        priority
+      />
       {data?.imgOverlay && (
-        <div className="flex max-w-2xl lg:max-w-3xl">
+        <div className="z-1 flex max-w-2xl lg:max-w-3xl">
           <Image
             src={data.imgOverlay}
             alt={data?.altText}

tailwind.config.js

@@ -97,6 +97,7 @@ export default {
         15: ".15",
       },
       zIndex: {
+        1: 1,
         videoThumbnail: 11,
       },
       height: {