fix(templates): adds priority to hero images (#10003)

Hero images should use the `priority` property so that browsers will
preload them. This is because hero images, by definition, are rendered
"above the fold" and should be treated as such, optimizing LCP. This
also means these images should _not_ define a `loading` strategy, as
this disregards the priority flag.

Author: jacobsfletch

templates/website/src/heros/HighImpact/index.tsx

@@ -38,13 +38,7 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
       </div>
       <div className="min-h-[80vh] select-none">
         {media && typeof media === 'object' && (
-          <Media
-            fill
-            imgClassName="-z-10 object-cover"
-            priority={false}
-            loading="lazy"
-            resource={media}
-          />
+          <Media fill imgClassName="-z-10 object-cover" priority resource={media} />
         )}
       </div>
     </div>

templates/website/src/heros/MediumImpact/index.tsx

@@ -30,8 +30,7 @@ export const MediumImpactHero: React.FC<Page['hero']> = ({ links, media, richTex
             <Media
               className="-mx-4 md:-mx-8 2xl:-mx-16"
               imgClassName=""
-              priority={false}
-              loading="lazy"
+              priority
               resource={media}
             />
             {media?.caption && (

templates/website/src/heros/PostHero/index.tsx

@@ -64,13 +64,7 @@ export const PostHero: React.FC<{
       </div>
       <div className="min-h-[80vh] select-none">
         {heroImage && typeof heroImage !== 'string' && (
-          <Media
-            fill
-            priority={false}
-            loading="lazy"
-            imgClassName="-z-10 object-cover"
-            resource={heroImage}
-          />
+          <Media fill priority imgClassName="-z-10 object-cover" resource={heroImage} />
         )}
         <div className="absolute pointer-events-none left-0 bottom-0 w-full h-1/2 bg-gradient-to-t from-black to-transparent" />
       </div>

templates/with-vercel-website/src/heros/HighImpact/index.tsx

@@ -38,13 +38,7 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
       </div>
       <div className="min-h-[80vh] select-none">
         {media && typeof media === 'object' && (
-          <Media
-            fill
-            imgClassName="-z-10 object-cover"
-            priority={false}
-            loading="lazy"
-            resource={media}
-          />
+          <Media fill imgClassName="-z-10 object-cover" priority resource={media} />
         )}
       </div>
     </div>

templates/with-vercel-website/src/heros/MediumImpact/index.tsx

@@ -30,8 +30,7 @@ export const MediumImpactHero: React.FC<Page['hero']> = ({ links, media, richTex
             <Media
               className="-mx-4 md:-mx-8 2xl:-mx-16"
               imgClassName=""
-              priority={false}
-              loading="lazy"
+              priority
               resource={media}
             />
             {media?.caption && (

templates/with-vercel-website/src/heros/PostHero/index.tsx

@@ -64,13 +64,7 @@ export const PostHero: React.FC<{
       </div>
       <div className="min-h-[80vh] select-none">
         {heroImage && typeof heroImage !== 'string' && (
-          <Media
-            fill
-            priority={false}
-            loading="lazy"
-            imgClassName="-z-10 object-cover"
-            resource={heroImage}
-          />
+          <Media fill priority imgClassName="-z-10 object-cover" resource={heroImage} />
         )}
         <div className="absolute pointer-events-none left-0 bottom-0 w-full h-1/2 bg-gradient-to-t from-black to-transparent" />
       </div>