Merge pull request #60 from thomasKn/fetchpriority

thomasKn · web-flow · commit 28dc678fda13 · 2024-02-11T14:16:50.000-05:00
Add fetchpriority, decoding and content-visibility
diff --git a/app/components/CmsSection.tsx b/app/components/CmsSection.tsx
@@ -73,7 +73,7 @@ function SectionWrapper(props: {
 
   return props.type === 'footer' ? (
     <footer
-      className="section-padding relative bg-background text-foreground"
+      className="section-padding relative bg-background text-foreground [content-visibility:auto]"
       data-footer-type={isDev ? sectionType : null}
     >
       <style dangerouslySetInnerHTML={{__html: cssVars}} />
@@ -84,7 +84,7 @@ function SectionWrapper(props: {
     </footer>
   ) : (
     <section
-      className="section-padding relative bg-background text-foreground"
+      className="section-padding relative bg-background text-foreground [content-visibility:auto]"
       data-section-type={isDev ? sectionType : null}
       id={`section-${data._key}`}
     >
diff --git a/app/components/ShopifyImage.tsx b/app/components/ShopifyImage.tsx
@@ -1,7 +1,7 @@
 import type {HydrogenImageProps} from '@shopify/hydrogen-react/Image';
 import type {ImageFragmentFragment} from 'storefrontapi.generated';
 
-import {Image} from '@shopify/hydrogen';
+import {Image, parseGid} from '@shopify/hydrogen';
 
 import {cn} from '~/lib/utils';
 
@@ -17,22 +17,42 @@ export function ShopifyImage({
   className?: string;
   data: ImageFragmentFragment;
 } & HydrogenImageProps) {
+  const id = parseGid(data.id || undefined).id;
   // Todo => Global image border-radius setting should apply to the wrapper <span/>
+  // No padding should be applied to the wrapper <span/> or the <img/> tag to avoid blurry LQIP becoming visible
   return (
-    <span className="relative block overflow-hidden">
+    <span
+      className="relative block overflow-hidden !p-0"
+      id={id ? `img-${id}` : undefined}
+    >
       <Image
-        className={cn(['relative z-[1]', className])}
+        className={cn('relative z-[1]', className, '!p-0')}
         data={data}
         {...props}
       />
-      <Image
-        className={cn(['absolute inset-0 overflow-hidden blur-xl', className])}
-        data={{
-          ...data,
-          url: data.thumbnail,
-        }}
-        {...props}
-      />
+      {id && (
+        <style
+          // Blurry bg image used as LQIP (Low Quality Image Placeholder)
+          // while high quality image is loading.
+          dangerouslySetInnerHTML={{
+            __html: `
+              #img-${id}::before {
+                content: "";
+                position: absolute;
+                background: url(${data.thumbnail});
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                filter: blur(10px);
+              }
+            `.trim(),
+          }}
+        />
+      )}
     </span>
   );
 }
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
@@ -35,9 +35,13 @@ export function Header() {
       <style dangerouslySetInnerHTML={{__html: colorPaletteCssVars}} />
       <div className="[--mobileHeaderXPadding:.75rem] lg:container">
         <div className="flex items-center justify-between">
-          <Link prefetch="intent" to={homePath}>
+          <Link
+            className="pl-[var(--mobileHeaderXPadding)] lg:pl-0"
+            prefetch="intent"
+            to={homePath}
+          >
             <Logo
-              className="h-auto w-[var(--logoWidth)] pl-[var(--mobileHeaderXPadding)] lg:pl-0"
+              className="h-auto w-[var(--logoWidth)]"
               sizes={logoWidth}
               style={
                 {
diff --git a/app/components/product/MediaGallery.tsx b/app/components/product/MediaGallery.tsx
@@ -22,6 +22,8 @@ export function MediaGallery() {
               <ShopifyImage
                 className="h-auto w-full"
                 data={media.image}
+                decoding="sync"
+                fetchpriority="high"
                 loading="eager"
                 sizes="(min-width: 1024px) 50vw, 100vw"
               />
diff --git a/app/components/sanity/SanityImage.tsx b/app/components/sanity/SanityImage.tsx
@@ -1,29 +1,33 @@
 import imageUrlBuilder from '@sanity/image-url';
+import React from 'react';
 
 import type {SanityImageFragment} from '~/lib/type';
 
 import {useEnvironmentVariables} from '~/hooks/useEnvironmentVariables';
 import {cn} from '~/lib/utils';
 
-export function SanityImage(props: {
+export function SanityImage({
+  aspectRatio,
+  className,
+  data,
+  decoding = 'async',
+  fetchpriority,
+  loading,
+  sanityEncodeData,
+  sizes,
+  style,
+}: {
   aspectRatio?: string;
   className?: string;
   data?: SanityImageFragment | null;
+  decoding?: 'async' | 'auto' | 'sync';
+  fetchpriority?: 'auto' | 'high' | 'low';
   loading?: 'eager' | 'lazy';
   sanityEncodeData?: string;
   sizes?: null | string;
   style?: React.CSSProperties;
 }) {
   const env = useEnvironmentVariables();
-  const {
-    aspectRatio,
-    className,
-    data,
-    loading,
-    sanityEncodeData,
-    sizes,
-    style,
-  } = props;
 
   if (!data) {
     return null;
@@ -88,52 +92,65 @@ export function SanityImage(props: {
     .concat(`, ${urlDefault} ${data.width}w`);
 
   // Todo => Global image border-radius setting should apply to the wrapper <span/>
+  // No padding should be applied to the wrapper <span/> or the <img/> tag to avoid blurry LQIP becoming visible
   return (
-    <span className="relative block overflow-hidden">
+    <span
+      className="relative block overflow-hidden !p-0"
+      id={data._ref ? `img-${data._ref}` : undefined}
+      style={
+        {
+          '--focalX': focalCoords.x + '%',
+          '--focalY': focalCoords.y + '%',
+        } as React.CSSProperties
+      }
+    >
       <img
         alt={data.altText || ''}
-        className={cn([
+        className={cn(
           'relative z-[1] object-[var(--focalX)_var(--focalY)]',
           className,
-        ])}
+          '!p-0',
+        )}
         // Adding this attribute makes sure the image is always clickable in the Presentation tool
         data-sanity={sanityEncodeData}
+        decoding={decoding}
+        fetchpriority={fetchpriority}
         height={aspectRatioHeight || data.height}
         loading={loading}
-        sizes={sizes || undefined}
+        sizes={sizes!}
         src={urlDefault}
         srcSet={srcSet}
         style={
           {
-            '--focalX': focalCoords.x + '%',
-            '--focalY': focalCoords.y + '%',
-            aspectRatio: `${aspectRatioWidth || data.width}/${aspectRatioHeight || data.height}`,
             ...style,
-          } as React.CSSProperties
-        }
-        width={aspectRatioWidth || data.width}
-      />
-      {/* Preview blurry image (30px) that will load before the highres image */}
-      <img
-        alt={data.altText || ''}
-        className={cn([
-          'absolute inset-0 object-[var(--focalX)_var(--focalY)] blur-2xl',
-          className,
-        ])}
-        height={aspectRatioHeight || data.height}
-        loading="eager"
-        sizes={sizes || undefined}
-        src={urlPreview}
-        srcSet={urlPreview}
-        style={
-          {
-            '--focalX': focalCoords.x + '%',
-            '--focalY': focalCoords.y + '%',
             aspectRatio: `${aspectRatioWidth || data.width}/${aspectRatioHeight || data.height}`,
           } as React.CSSProperties
         }
         width={aspectRatioWidth || data.width}
       />
+      {data._ref && (
+        <style
+          // Blurry bg image used as LQIP (Low Quality Image Placeholder)
+          // while high quality image is loading.
+          dangerouslySetInnerHTML={{
+            __html: `
+              #img-${data._ref}::before {
+                content: "";
+                position: absolute;
+                background: url(${urlPreview});
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                filter: blur(10px);
+              }
+            `.trim(),
+          }}
+        />
+      )}
     </span>
   );
 }
diff --git a/app/components/sections/CollectionBannerSection.tsx b/app/components/sections/CollectionBannerSection.tsx
@@ -34,6 +34,8 @@ export function CollectionBannerSection(
             aspectRatio="16/9"
             crop="center"
             data={collection.image}
+            decoding="sync"
+            fetchpriority="high"
             loading="eager"
             sizes="100vw"
           />
diff --git a/app/components/sections/ImageBannerSection.tsx b/app/components/sections/ImageBannerSection.tsx
@@ -30,6 +30,8 @@ export function ImageBannerSection(
         <SanityImage
           aspectRatio="16/9"
           data={data.backgroundImage}
+          decoding="sync"
+          fetchpriority="high"
           sizes="100vw"
         />
       </BannerMedia>
diff --git a/app/components/ui/Card.tsx b/app/components/ui/Card.tsx
@@ -46,7 +46,7 @@ const CardMedia = forwardRef<
       ref={ref}
       {...props}
     >
-      <div className="origin-center scale-[1.005] [transition:transform_0.5s_ease] group-hover/card:scale-[1.03] [&>*]:size-full [&>*]:object-cover">
+      <div className="origin-center scale-[1.005] [transition:transform_0.5s_ease] group-hover/card:scale-[1.03] [&_img]:size-full [&_img]:object-cover">
         {props.children}
       </div>
     </div>
diff --git a/app/graphql/fragments.ts b/app/graphql/fragments.ts
@@ -1,5 +1,6 @@
 export const IMAGE_FRAGMENT = `#graphql
   fragment ImageFragment on Image {
+    id
     altText
     width
     height
@@ -10,6 +11,7 @@ export const IMAGE_FRAGMENT = `#graphql
 
 export const PRODUCT_VARIANT_IMAGE_FRAGMENT = `#graphql
   fragment ProductVariantImageFragment on Image {
+    id
     altText
     width
     height
@@ -20,6 +22,7 @@ export const PRODUCT_VARIANT_IMAGE_FRAGMENT = `#graphql
 
 export const PRODUCT_CARD_IMAGE_FRAGMENT = `#graphql
   fragment ProductCardImageFragment on Image {
+    id
     altText
     width
     height
diff --git a/custom.d.ts b/custom.d.ts
@@ -0,0 +1,7 @@
+import {AriaAttributes, DOMAttributes} from 'react';
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    fetchpriority?: 'high' | 'low' | 'auto';
+  }
+}
diff --git a/storefrontapi.generated.d.ts b/storefrontapi.generated.d.ts

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ const CardMedia = forwardRef<`
`46`	`46`	`ref={ref}`
`47`	`47`	`{...props}`
`48`	`48`	`>`
`49`		`- <div className="origin-center scale-[1.005] [transition:transform_0.5s_ease] group-hover/card:scale-[1.03] [&>]:size-full [&>]:object-cover">`
	`49`	`+ <div className="origin-center scale-[1.005] [transition:transform_0.5s_ease] group-hover/card:scale-[1.03] [&_img]:size-full [&_img]:object-cover">`
`50`	`50`	`{props.children}`
`51`	`51`	`</div>`
`52`	`52`	`</div>`