Try turning off all Link prefetching

SSTPIERRE2 · Mar 27, 2024 · ef85dbe · ef85dbe
1 parent ef7a80e
commit ef85dbe
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 9 deletions.
diff --git a/packages/web/components/Logo/Icon.tsx b/packages/web/components/Logo/Icon.tsx
@@ -5,7 +5,7 @@ import clsx from 'clsx';
 
 const Icon = () => {
   return (
-    <Link href="/" className={styles.wrapper}>
+    <Link href="/" className={styles.wrapper} prefetch={false}>
       <span className={clsx(styles.text, styles.accent)}>S</span>
       <span className={clsx(styles.text, styles.primary)}>S</span>
       <div className={clsx(styles.border, styles.bottomLeft)} />

diff --git a/packages/web/components/Logo/Primary.tsx b/packages/web/components/Logo/Primary.tsx
@@ -5,7 +5,7 @@ import clsx from 'clsx';
 
 const Logo = () => {
   return (
-    <Link href="/" id="logo" className={styles.wrapper}>
+    <Link href="/" id="logo" className={styles.wrapper} prefetch={false}>
       <span className={clsx(styles.text, styles.primary)}>Stephen</span>
       <span className={clsx(styles.text, styles.accent)}>Stephen</span>
       <div className={clsx(styles.wrapper, styles.lastNameWrapper)}>

diff --git a/packages/web/components/MobileMenu/MobileMenu.tsx b/packages/web/components/MobileMenu/MobileMenu.tsx
@@ -84,6 +84,7 @@ const MobileMenu = () => {
                       key={slug}
                       href={href}
                       onClick={() => toggleMobileMenu()}
+                      prefetch={false}
                     >
                       {label}
                     </Link>

diff --git a/packages/web/components/NavBar/NavBar.tsx b/packages/web/components/NavBar/NavBar.tsx
@@ -15,7 +15,7 @@ const NavBar = () => {
   const underlineId = useId();
 
   const handleClick = (
-    e: React.MouseEvent<HTMLAnchorElement> & { target: { id: slug } }
+    e: React.MouseEvent<HTMLAnchorElement> & { target: { id: slug } },
   ) => {
     setHoveredLink(e.target.id);
   };
@@ -53,11 +53,12 @@ const NavBar = () => {
                 data-text={label}
                 style={{
                   fontWeight:
-                    pathName === href
-                      ? 'var(--font-weight-bold)'
-                      : 'var(--font-weight-medium)',
+                    pathName === href ?
+                      'var(--font-weight-bold)'
+                    : 'var(--font-weight-medium)',
                 }}
                 onMouseEnter={() => setHoveredLink(slug)}
+                prefetch={false}
               >
                 {label}
               </Link>

diff --git a/packages/web/components/PostCard/PostCard.tsx b/packages/web/components/PostCard/PostCard.tsx
@@ -28,7 +28,7 @@ const PostCard = ({
   return (
     <article className={styles.wrapper}>
       <div className={styles.content}>
-        <Link href={`/blog/${slug}`}>
+        <Link href={`/blog/${slug}`} prefetch={false}>
           <h2 className={styles.title}>{title}</h2>
         </Link>
 
@@ -43,7 +43,11 @@ const PostCard = ({
           ))}
         </div>
         <p>{abstract}</p>
-        <Link href={`/blog/${slug}`} className={styles.readMore}>
+        <Link
+          href={`/blog/${slug}`}
+          className={styles.readMore}
+          prefetch={false}
+        >
           Read more <VisuallyHidden>about this post</VisuallyHidden>
           <ArrowRight className={styles.readMoreArrow} size="1.25rem" />
         </Link>

diff --git a/packages/web/components/PrimaryLink/PrimaryLink.tsx b/packages/web/components/PrimaryLink/PrimaryLink.tsx
@@ -19,6 +19,7 @@ const PrimaryLink: FC<Props & PropsWithChildren> = ({
       className={clsx(styles.link, className)}
       href={href}
       title={title}
+      prefetch={false}
       {...props}
     >
       {children}

diff --git a/packages/web/components/SectionHeading/SectionHeading.tsx b/packages/web/components/SectionHeading/SectionHeading.tsx
@@ -14,7 +14,7 @@ const SectionHeading = ({ children }: HTMLAttributes<HTMLHeadingElement>) => {
   return (
     <h2 id={id} className={styles.heading}>
       {children}
-      <Link href={`${path}#${id}`} className={styles.link}>
+      <Link href={`${path}#${id}`} className={styles.link} prefetch={false}>
         <LinkIcon />
       </Link>
     </h2>

diff --git a/packages/web/components/SupportingLink/SupportingLink.tsx b/packages/web/components/SupportingLink/SupportingLink.tsx
@@ -19,6 +19,7 @@ const SupportingLink: FC<Props & PropsWithChildren> = ({
     <Link
       className={clsx(styles.link, active && styles.active)}
       href={href}
+      prefetch={false}
       {...props}
     >
       {children}