chore: prefetch false on product cards

apps/web/app/home/[bucket]/page.tsx

@@ -1,8 +1,6 @@
-import { Suspense } from "react"
 import { BUCKETS } from "constants/index"
 import { BestOffersSection } from "views/Homepage/BestOffersSection"
-import { CarouselSectionSkeleton } from "views/Homepage/CarouselSection"
-import { CategoriesSection, CategoriesSectionSkeleton } from "views/Homepage/CategoriesSection"
+import { CategoriesSection } from "views/Homepage/CategoriesSection"
 import { EverythingUnderSection } from "views/Homepage/EverythingUnderSection"
 import { AnnouncementBar } from "components/AnnouncementBar/AnnouncementBar"
 import { HeroSection } from "views/Homepage/HeroSection"
@@ -24,17 +22,9 @@ export default function Homepage({ params: { bucket } }: { params: { bucket: str
       <HeroSection className="-order-1 md:-order-2" title={heroTitles[bucket]} />
       <AnnouncementBar className="-order-2 md:-order-1" />
 
-      <Suspense fallback={<CategoriesSectionSkeleton />}>
-        <CategoriesSection />
-      </Suspense>
-
-      <Suspense fallback={<CarouselSectionSkeleton />}>
-        <BestOffersSection />
-      </Suspense>
-
-      <Suspense fallback={<CarouselSectionSkeleton />}>
-        <EverythingUnderSection />
-      </Suspense>
+      <CategoriesSection />
+      <BestOffersSection />
+      <EverythingUnderSection />
     </div>
   )
 }

apps/web/components/Footer/Footer.tsx

@@ -5,32 +5,32 @@ export function Footer() {
     <div className="bg-black text-white">
       <div className="max-w-container-md mx-auto flex w-full flex-col justify-between px-4 xl:px-0">
         <header className="flex justify-end gap-4 pt-8">
-          <Link prefetch={false} target="_blank" href={"https://www.facebook.com/blazity/"} aria-label="Facebook link">
+          <a rel="noreferrer" target="_blank" href={"https://www.facebook.com/blazity/"} aria-label="Facebook link">
             <FacebookIcon className="text-white" />
-          </Link>
+          </a>
 
-          <Link prefetch={false} target="_blank" href={"https://twitter.com/blazity"} aria-label="Twitter link">
+          <a rel="noreferrer" target="_blank" href={"https://twitter.com/blazity"} aria-label="Twitter link">
             <TwitterIcon className="text-white" />
-          </Link>
+          </a>
 
-          <Link prefetch={false} target="_blank" href={"https://www.instagram.com/blazitysoftware/"} aria-label="Instagram link">
+          <a rel="noreferrer" target="_blank" href={"https://www.instagram.com/blazitysoftware/"} aria-label="Instagram link">
             <InstagramIcon className="text-white" />
-          </Link>
+          </a>
 
-          <Link prefetch={false} target="_blank" href={"https://www.linkedin.com/company/blazity"} aria-label="Linkedin link">
+          <a rel="noreferrer" target="_blank" href={"https://www.linkedin.com/company/blazity"} aria-label="Linkedin link">
             <LinkedinIcon className="text-white" />
-          </Link>
+          </a>
 
-          <Link prefetch={false} target="_blank" href={"https://www.youtube.com/channel/UCYDeWaSWiOHn_lUHY-u1VYw/videos"} aria-label="Youtube link">
+          <a rel="noreferrer" target="_blank" href={"https://www.youtube.com/channel/UCYDeWaSWiOHn_lUHY-u1VYw/videos"} aria-label="Youtube link">
             <YoutubeIcon className="text-white" />
-          </Link>
+          </a>
         </header>
         <main className="py-32">
-          <Link href="https://v0.dev/" target="_blank">
+          <a href="https://v0.dev/" rel="noreferrer" target="_blank">
             <span className="focus:ring-ring mb-4 inline-flex w-fit items-center whitespace-nowrap rounded-full border border-transparent bg-white px-2.5 py-0.5 text-xs font-semibold text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2">
-              Designed by v0
+              Designed with v0
             </span>
-          </Link>
+          </a>
           <p className="text-3xl font-bold">Missing feature? </p>
           <p className="mt-1 text-xl">
             <a className="p-1 underline" href="mailto:[email protected]">

apps/web/components/NavigationBar/NavigationBar.tsx

@@ -56,7 +56,7 @@ export function NavigationBar({ items }: NavigationBarProps) {
   return (
     <header className="mega-navbar sticky top-0 z-50 mx-auto my-0 flex w-full flex-wrap content-center items-center justify-between border-b border-black bg-white py-6 md:border-y ">
       <div className="md:max-w-container-md flex justify-start px-4 md:mx-auto md:w-full md:px-0">
-        <Link href="/" className="brand mr-20 hidden items-center text-xl font-bold md:flex">
+        <Link prefetch={false} href="/" className="brand mr-20 hidden items-center text-xl font-bold md:flex">
           Acme
         </Link>
 
@@ -66,7 +66,7 @@ export function NavigationBar({ items }: NavigationBarProps) {
             <span className="burger-line"></span>
             <span className="burger-line"></span>
           </button>
-          <Link href="/" className="brand flex items-center text-xl font-bold">
+          <Link prefetch={false} href="/" className="brand flex items-center text-xl font-bold">
             Acme
           </Link>
           <div className="menu-actions absolute right-4 flex items-center justify-center gap-2">

apps/web/components/ProductCard/ProductCard.tsx

@@ -7,17 +7,18 @@ import { StarIcon } from "components/Icons/StarIcon"
 
 interface ProductCardProps extends Pick<CommerceProduct, "variants" | "handle" | "images" | "title" | "featuredImage" | "minPrice" | "avgRating" | "totalReviews" | "vendor"> {
   priority?: boolean
+  prefetch?: boolean
   className?: string
 }
 
-export const ProductCard = ({ variants, handle, title, featuredImage, minPrice, avgRating, totalReviews, className, priority, vendor }: ProductCardProps) => {
+export const ProductCard = ({ variants, handle, title, featuredImage, minPrice, avgRating, totalReviews, className, priority, vendor, prefetch = false }: ProductCardProps) => {
   const noOfVariants = variants?.length
   const href = `/product/${handle}`
   const linkAria = `Visit product: ${title}`
   const variantPrice = variants?.find(Boolean)?.price
 
   return (
-    <Link className={cn("group flex h-full w-full flex-col overflow-hidden transition-all hover:shadow-md", className)} aria-label={linkAria} href={href}>
+    <Link className={cn("group flex h-full w-full flex-col overflow-hidden transition-all hover:shadow-md", className)} aria-label={linkAria} href={href} prefetch={prefetch}>
       <div className="relative aspect-square overflow-hidden">
         <Image
           priority={priority}

apps/web/views/Homepage/HeroSection.tsx

@@ -1,6 +1,5 @@
 import { Button } from "components/Button/Button"
 import Image from "next/image"
-import Link from "next/link"
 import { cn } from "utils/cn"
 
 export function HeroSection({ title, className }: { title: string; className?: string }) {
@@ -11,11 +10,11 @@ export function HeroSection({ title, className }: { title: string; className?: s
       </div>
       <div className="flex basis-1/2 flex-col items-center justify-start gap-16 px-4 py-20 md:items-start md:p-36">
         <h1 className="text-center text-[32px]/[32px] tracking-tighter sm:text-[77px]/[79px] md:text-left">{title}</h1>
-        <Link href="https://git.new/commerce" target="_blank" prefetch={false}>
+        <a href="https://git.new/commerce" rel="noreferrer" target="_blank">
           <Button size="xl" variant="secondary" className="py-[10px] text-[21px] md:py-[28px] md:text-[23px]">
             See on GitHub
           </Button>
-        </Link>
+        </a>
       </div>
     </div>
   )

apps/web/views/Product/BackButton.tsx

@@ -3,7 +3,7 @@ import Link from "next/link"
 
 export function BackButton({ href = "/search", className }: { href?: string; className?: string }) {
   return (
-    <Link href={href} className={className} aria-label="Go back">
+    <Link href={href} className={className} aria-label="Go back" prefetch={false}>
       <ArrowIcon className="size-8 cursor-pointer fill-black transition-transform hover:scale-110" />
     </Link>
   )

apps/web/views/Product/ReviewsSection.tsx

@@ -78,7 +78,7 @@ export const ReviewsSection = ({ productId, productHandle, reviews, total, summa
           </Carousel>
         </div>
         <div className="mt-10 flex justify-center md:justify-end">
-          <Link href={`/reviews/${productHandle}`} className="text-sm underline">
+          <Link href={`/reviews/${productHandle}`} className="text-sm underline" prefetch={false}>
             See all reviews
           </Link>
         </div>