fix: use priority image loading for heroes (#589)

components/molecules/Hero/index.tsx

@@ -0,0 +1,37 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import * as Styled from "./styles";
+
+interface HeroProps {
+  data: Array<any>;
+  focalPointX?: number;
+  focalPointY?: number;
+  className?: string;
+}
+const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
+  data,
+  focalPointX = 50,
+  focalPointY = 50,
+  className,
+  children,
+}) => {
+  const imageData = data && data[0];
+
+  if (!imageData?.url) return null;
+
+  return (
+    <Styled.HeroContainer
+      data-cy="hero"
+      style={{
+        "--Hero-object-position": `${focalPointX || 50}% ${focalPointY || 50}%`,
+      }}
+      className={className}
+    >
+      <Styled.HeroImage image={{ ...imageData, priority: true }} />
+      {children}
+    </Styled.HeroContainer>
+  );
+};
+
+Hero.displayName = "Molecule.Hero";
+
+export default Hero;

components/page/Hero/styles.js → components/molecules/Hero/styles.ts

@@ -1,6 +1,7 @@
+"use client";
 import styled from "styled-components";
 import { fluidScale, containerFullBleed } from "@/styles/globalStyles";
-import { Image } from "@rubin-epo/epo-react-lib";
+import Image from "@rubin-epo/epo-react-lib/Image";
 
 export const HeroContainer = styled.div`
   ${containerFullBleed("CONTAINER_FULL")}
@@ -10,10 +11,6 @@ export const HeroContainer = styled.div`
 `;
 
 export const HeroImage = styled(Image)`
-  --Hero-object-position: ${({ $focalPointX, $focalPointY }) =>
-    `${$focalPointX}% ${$focalPointY}%;`}
-  width: 100%;
-
   /* stylelint-disable declaration-no-important */
   height: 100% !important;
   object-fit: cover;

components/page/PageContent/styles.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import HeroComponent from "@/page/Hero";
+import HeroComponent from "@/components/molecules/Hero";
 import {
   fluidScale,
   respond,
@@ -23,8 +23,6 @@ export const Hero = styled(HeroComponent)`
     WIDE_BREAKPOINT,
     MOBILE_BREAKPOINT
   )};
-  --Hero-object-position: ${({ $focalPointX, $focalPointY }) =>
-    `${$focalPointX}% ${$focalPointY}%;`}
   --hero-overlap: ${HERO_OVERLAP};
 `;
 

components/templates/EventPage/index.js

@@ -6,7 +6,7 @@ import {
   createLocationString,
   useCustomBreadcrumbs,
 } from "@/lib/utils";
-import Hero from "@/page/Hero";
+import Hero from "@/components/molecules/Hero";
 import ContentBlockFactory from "@/factories/ContentBlockFactory";
 import { Share } from "@/content-blocks";
 import Breadcrumbs from "@/page/Breadcrumbs";

components/templates/HomePage/index.js

@@ -2,7 +2,7 @@
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import ContentBlockFactory from "@/factories/ContentBlockFactory";
-import Hero from "@/page/Hero";
+import Hero from "@/components/molecules/Hero";
 import { Buttonish, MixedLink } from "@rubin-epo/epo-react-lib";
 import { makeDateString, makeTruncatedString } from "@/lib/utils";
 import { SlideBlock } from "@/components/content-blocks";

cypress/e2e/homepage.cy.js

@@ -1,12 +1,18 @@
-describe("Search from Homepage", () => {
+describe("Homepage", () => {
   beforeEach(() => {
     // Cypress starts out with a blank slate for each test
     // so we must tell it to visit our website with the `cy.visit()` command.
     // Since we want to visit the same URL at the start of all our tests,
     // we include it in our beforeEach function so that it runs before each test
     cy.visit("/");
   });
-
+  it("has a hero image with priority loading", () => {
+    cy.get("[data-cy=hero] > img")
+      .invoke("attr", "src")
+      .should("have.length.gt", 0);
+    cy.get("[data-cy=hero] > img").should("have.attr", "loading", "eager");
+    cy.get("[data-cy=hero] > img").should("have.attr", "decoding", "sync");
+  });
   it("Searching yields results", () => {
     cy.get(".c-search-bar__toggle").click();
     cy.get("#headerSearchBar").should("be.visible").type("rubin{enter}");

types/css.d.ts

@@ -0,0 +1,6 @@
+declare module "csstype" {
+  interface Properties {
+    // Allow any CSS Custom Properties
+    [index: `--${string}`]: any;
+  }
+}