feat: introduce custom Link component with hover-only prefetching

simonknittel · Jan 6, 2025 · 0abeba6 · 0abeba6
1 parent 193d012
commit 0abeba6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/app/src/app/app/spynet/citizen/_components/Table.tsx b/app/src/app/app/spynet/citizen/_components/Table.tsx
@@ -1,6 +1,6 @@
 import { Actions } from "@/common/components/Actions";
+import { Link } from "@/common/components/Link";
 import { type Entity, type Role } from "@prisma/client";
-import Link from "next/link";
 import { Suspense } from "react";
 import { FaExternalLinkAlt, FaSortDown, FaSortUp } from "react-icons/fa";
 import { HistoryModal } from "../../entity/[id]/_components/generic-log-type/HistoryModal";

diff --git a/app/src/app/app/spynet/notes/_components/Table.tsx b/app/src/app/app/spynet/notes/_components/Table.tsx
@@ -1,4 +1,5 @@
 import { Actions } from "@/common/components/Actions";
+import { Link } from "@/common/components/Link";
 import {
   type ClassificationLevel,
   type Entity,
@@ -7,7 +8,6 @@ import {
   type NoteType,
   type User,
 } from "@prisma/client";
-import Link from "next/link";
 import { FaSortDown, FaSortUp } from "react-icons/fa";
 import { type EntityLogConfirmationState } from "../../../../../types";
 import ConfirmationState from "./ConfirmationState";

diff --git a/app/src/app/app/spynet/other/_components/Table.tsx b/app/src/app/app/spynet/other/_components/Table.tsx
@@ -1,4 +1,5 @@
 import { Actions } from "@/common/components/Actions";
+import { Link } from "@/common/components/Link";
 import { entityLogTypeTranslations } from "@/common/utils/entityLogTypeTranslations";
 import type { EntityLogConfirmationState } from "@/types";
 import {
@@ -7,7 +8,6 @@ import {
   type EntityLogAttribute,
   type User,
 } from "@prisma/client";
-import Link from "next/link";
 import { FaSortDown, FaSortUp } from "react-icons/fa";
 import ConfirmationState from "./ConfirmationState";
 import DeleteLog from "./DeleteLog";

diff --git a/app/src/common/components/Link.tsx b/app/src/common/components/Link.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import NextLink from "next/link";
+import { useRouter } from "next/navigation";
+import type { ComponentProps } from "react";
+
+type Props = ComponentProps<typeof NextLink>;
+
+export const Link = (props: Props) => {
+  const { prefetch, href, onMouseEnter, ...rest } = props;
+  const router = useRouter();
+
+  return (
+    <NextLink
+      href={href}
+      prefetch={prefetch === undefined ? false : prefetch}
+      onMouseEnter={
+        prefetch === undefined && onMouseEnter === undefined
+          ? () => router.prefetch(typeof href === "string" ? href : href.href)
+          : onMouseEnter
+      }
+      {...rest}
+    />
+  );
+};
diff --git a/app/src/events/components/ParticipantsTab.tsx b/app/src/events/components/ParticipantsTab.tsx
@@ -1,11 +1,11 @@
 import { RolesCell } from "@/app/app/spynet/citizen/_components/RolesCell";
 import { requireAuthentication } from "@/auth/server";
+import { Link } from "@/common/components/Link";
 import { type getEvent } from "@/discord/utils/getEvent";
 import type { memberSchema, userSchema } from "@/discord/utils/schemas";
 import type { Entity } from "@prisma/client";
 import clsx from "clsx";
 import Image from "next/image";
-import Link from "next/link";
 import { Suspense } from "react";
 import type { z } from "zod";
 import { getParticipants } from "../utils/getParticipants";