Merge branch 'perf' into main

buildheadless · Dec 7, 2023 · 445b689 · 445b689
2 parents c7d7955 + cb4cb4c
commit 445b689
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/templates/hydrogen-theme/app/components/CollectionCard.tsx b/templates/hydrogen-theme/app/components/CollectionCard.tsx
@@ -18,7 +18,7 @@ export function CollectionCard(props: {
 
   return (
     <div className="overflow-hidden rounded-lg border">
-      <Link prefetch="viewport" to={`/collections/${collection.handle}`}>
+      <Link prefetch="intent" to={`/collections/${collection.handle}`}>
         {collection.image && (
           <Image
             aspectRatio="16/9"

diff --git a/templates/hydrogen-theme/app/components/ProductCard.tsx b/templates/hydrogen-theme/app/components/ProductCard.tsx
@@ -25,7 +25,7 @@ export function ProductCard(props: {
   return (
     <div className="overflow-hidden rounded-lg border">
       {!skeleton && product && firstVariant ? (
-        <Link prefetch="viewport" to={`/products/${product.handle}`}>
+        <Link prefetch="intent" to={`/products/${product.handle}`}>
           {firstVariant?.image && (
             <Image
               aspectRatio="16/9"

diff --git a/templates/hydrogen-theme/app/components/product/MediaGallery.tsx b/templates/hydrogen-theme/app/components/product/MediaGallery.tsx
@@ -20,6 +20,7 @@ export function MediaGallery() {
               data={media}
               mediaOptions={{
                 image: {
+                  loading: 'eager',
                   sizes: '(min-width: 1024px) 50vw, 100vw',
                 },
               }}

diff --git a/templates/hydrogen-theme/app/components/sanity/link/SanityInternalLink.tsx b/templates/hydrogen-theme/app/components/sanity/link/SanityInternalLink.tsx
@@ -47,7 +47,7 @@ export function SanityInternalLink(props: {
 
   // Todo: add Navlink support
   return (
-    <Link className={className} prefetch="viewport" to={url}>
+    <Link className={className} prefetch="intent" to={url}>
       {children ? children : name}
     </Link>
   );

diff --git a/templates/hydrogen-theme/app/routes/($locale).collections.$collectionHandle.tsx b/templates/hydrogen-theme/app/routes/($locale).collections.$collectionHandle.tsx
@@ -137,7 +137,12 @@ export default function Collection() {
       {collection.image && (
         <section>
           <div className="relative h-80 w-full overflow-hidden">
-            <Image className="" crop="center" data={collection.image} />
+            <Image
+              crop="center"
+              data={collection.image}
+              loading="eager"
+              sizes="100vw"
+            />
             <div className="absolute inset-0">
               <div className="flex h-full items-center justify-center text-white">
                 <h1>{collection.title}</h1>