From b6263269904e825eb689ffce0c6ef533c8acb5ac Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Thu, 6 Jan 2022 15:56:25 -0800
Subject: [PATCH] feat: added prefetch to links

---
 app/components/cta-banner.tsx             |  2 +-
 app/components/footer.tsx                 |  2 +-
 app/components/navbar.tsx                 | 10 +++++-----
 app/components/scrolling-product-list.tsx |  6 +++---
 app/components/three-product-grid.tsx     |  4 ++--
 app/containers/cdp/cdp.component.tsx      |  8 ++++----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/components/cta-banner.tsx b/app/components/cta-banner.tsx
index 4a26c36..4a7803e 100644
--- a/app/components/cta-banner.tsx
+++ b/app/components/cta-banner.tsx
@@ -27,7 +27,7 @@ export function CtaBanner({
       <div className="flex-1 mt-3 lg:ml-8">
         <p className="text-xl font-light mb-4">{description}</p>
         <p>
-          <Link className="group inline-flex items-center" to={ctaTo}>
+          <Link className="group inline-flex items-center" prefetch="intent" to={ctaTo}>
             <span className="text-xl font-semibold group-focus:underline group-hover:underline focus:underline hover:underline">
               {ctaText}
             </span>
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index c993409..890317c 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -51,7 +51,7 @@ export function Footer({
             <li key={page.id}>
               <Link
                 className="focus:text-gray-300 hover:text-gray-300"
-                to={page.to}
+                prefetch="intent" to={page.to}
               >
                 {page.title}
               </Link>
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
index 3f94502..4028586 100644
--- a/app/components/navbar.tsx
+++ b/app/components/navbar.tsx
@@ -44,7 +44,7 @@ export function Navbar({
     <nav className="p-4 lg:px-6 border-b border-zinc-700">
       <div className="flex">
         <div className="flex items-center flex-1">
-          <Link to={`/${lang}`}>
+          <Link prefetch="intent" to={`/${lang}`}>
             {translations ? (
               <span className="sr-only">{translations.Home}</span>
             ) : null}
@@ -80,7 +80,7 @@ export function Navbar({
               <li key={category.name + "|" + i} className="mx-2">
                 <Link
                   className="whitespace-nowrap hover:text-gray-300"
-                  to={category.to}
+                  prefetch="intent" to={category.to}
                 >
                   {category.name}
                 </Link>
@@ -100,7 +100,7 @@ export function Navbar({
         </div>
         <div className="flex items-center">
           <Link
-            to={`/${lang}/cart`}
+            prefetch="intent" to={`/${lang}/cart`}
             className="group relative inline-block hover:text-gray-300 ml-4"
             onClick={(event) => {
               event.preventDefault();
@@ -121,7 +121,7 @@ export function Navbar({
             )}
           </Link>
           <Link
-            to={`/${lang}/wishlist`}
+            prefetch="intent" to={`/${lang}/wishlist`}
             className="hover:text-gray-300 ml-4"
             onClick={(event) => {
               event.preventDefault();
@@ -182,7 +182,7 @@ export function Navbar({
                           <Link
                             onClick={() => close()}
                             className="text-xl text-blue-400 hover:text-blue-500"
-                            to={category.to}
+                            prefetch="intent" to={category.to}
                           >
                             {category.name}
                           </Link>
diff --git a/app/components/scrolling-product-list.tsx b/app/components/scrolling-product-list.tsx
index 7e62d47..957349a 100644
--- a/app/components/scrolling-product-list.tsx
+++ b/app/components/scrolling-product-list.tsx
@@ -27,7 +27,7 @@ function ScrollingProductItem({
   return (
     <li className="lg:pr-12 relative">
       <Link
-        to={to}
+        prefetch="intent" to={to}
         className="group block aspect-square overflow-hidden w-screen max-w-sm"
         tabIndex={disabled ? -1 : undefined}
       >
@@ -65,7 +65,7 @@ export function ScrollingProductList({
             key={product.id}
             image={product.image}
             title={product.title}
-            to={product.to}
+            prefetch="intent" to={product.to}
           />
         )),
     [products]
@@ -80,7 +80,7 @@ export function ScrollingProductList({
             key={product.id}
             image={product.image}
             title={product.title}
-            to={product.to}
+            prefetch="intent" to={product.to}
             disabled
           />
         )),
diff --git a/app/components/three-product-grid.tsx b/app/components/three-product-grid.tsx
index 13fd506..ffe4d60 100644
--- a/app/components/three-product-grid.tsx
+++ b/app/components/three-product-grid.tsx
@@ -38,7 +38,7 @@ function ThreeProductGridItem({
           backgroundColor
         )}
       >
-        <Link className="block group" to={product.to} aria-labelledby={id}>
+        <Link className="block group" prefetch="intent" to={product.to} aria-labelledby={id}>
           <OptimizedImage
             className="object-cover w-full h-full transform transition duration-500 motion-safe:group-focus:scale-110 motion-safe:group-hover:scale-110"
             src={product.image}
@@ -87,7 +87,7 @@ function ThreeProductGridItem({
         <div className="absolute top-0 left-0 right-0">
           <div className="flex">
             <Link
-              to={product.to}
+              prefetch="intent" to={product.to}
               className="group-tpgi block flex-1"
               tabIndex={-1}
               id={id}
diff --git a/app/containers/cdp/cdp.component.tsx b/app/containers/cdp/cdp.component.tsx
index 70e31fb..c07f094 100644
--- a/app/containers/cdp/cdp.component.tsx
+++ b/app/containers/cdp/cdp.component.tsx
@@ -14,7 +14,7 @@ function ThreeProductGridItem({ product }: { product: CDPProduct }) {
   return (
     <li key={product.id}>
       <div className="group block relative aspect-square overflow-hidden bg-zinc-800">
-        <Link className="block group" to={product.to} aria-labelledby={id}>
+        <Link className="block group" prefetch="intent" to={product.to} aria-labelledby={id}>
           <OptimizedImage
             className="object-cover w-full h-full transform transition duration-500 motion-safe:group-focus:scale-110 motion-safe:group-hover:scale-110"
             src={product.image}
@@ -40,7 +40,7 @@ function ThreeProductGridItem({ product }: { product: CDPProduct }) {
         <div className="absolute top-0 left-0 right-0">
           <div className="flex">
             <Link
-              to={product.to}
+              prefetch="intent" to={product.to}
               className="group-tpgi block flex-1"
               tabIndex={-1}
               id={id}
@@ -105,7 +105,7 @@ export default function CDP() {
               <Link
                 aria-selected={cat.slug !== category}
                 className="focus:underline hover:underline whitespace-nowrap"
-                to={(() => {
+                prefetch="intent" to={(() => {
                   let params = new URLSearchParams(location.search);
                   params.delete("q");
                   params.set("category", cat.slug);
@@ -131,7 +131,7 @@ export default function CDP() {
               <Link
                 aria-selected={sortBy.value !== sort}
                 className="focus:underline hover:underline whitespace-nowrap"
-                to={(() => {
+                prefetch="intent" to={(() => {
                   let params = new URLSearchParams(location.search);
                   params.set("sort", sortBy.value);
                   return location.pathname + "?" + params.toString();