chore(editor): preload branch links using Link instead of router push (#4713)

Fixes FER-

## Short description of the changes made

## What was the motivation & context behind this PR?

## How has this PR been tested?

Author: sbawabe

packages/fern-dashboard/src/components/docs-page/BranchList.tsx

@@ -24,16 +24,6 @@ export function BranchList({ docsUrl, sourceRepo }: { docsUrl: DocsUrl; sourceRe
     const [visibleCount, setVisibleCount] = useState(3);
     const BRANCHES_PER_PAGE = 3;
 
-    const handleBranchClick = (branchName: string) => {
-        const editorSlug = constructEditorSlug({
-            orgName,
-            docsUrl: encodeURIComponent(docsUrl) as EncodedDocsUrl,
-            branchName,
-            slug: ROOT_SLUG_ALIAS
-        });
-        router.push(editorSlug);
-    };
-
     const handleBranchDelete = (branchName: string) => {
         deleteBranch(branchName);
         setDeletedBranches((prev) => new Set(prev).add(branchName));
@@ -62,7 +52,6 @@ export function BranchList({ docsUrl, sourceRepo }: { docsUrl: DocsUrl; sourceRe
                             sourceRepo={sourceRepo}
                             docsUrl={docsUrl}
                             handleBranchDelete={handleBranchDelete}
-                            handleBranchClick={handleBranchClick}
                             showDivider={index < visibleBranches.length - 1}
                         />
                     ))}

packages/fern-dashboard/src/components/docs-page/BranchListItem.tsx

@@ -1,9 +1,10 @@
+import { constructEditorSlug, ROOT_SLUG_ALIAS } from "@fern-docs/components/navigation";
 import { ArrowRight, Loader2 } from "lucide-react";
-import { useState } from "react";
-
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { useOrgName } from "@/app/[orgName]/context/OrgNameContext";
 import type { GithubSourceRepo } from "@/app/services/github/types";
-import type { DocsUrl } from "@/utils/types";
-
+import type { DocsUrl, EncodedDocsUrl } from "@/utils/types";
 import { Button } from "../ui/button";
 import { BranchPRInfo } from "./BranchPRInfo";
 import { DeleteBranchButton } from "./DeleteBranchButton";
@@ -13,17 +14,27 @@ export function BranchListItem({
     sourceRepo,
     docsUrl,
     showDivider = false,
-    handleBranchDelete,
-    handleBranchClick
+    handleBranchDelete
 }: {
     branch: string;
     docsUrl: DocsUrl;
     sourceRepo?: GithubSourceRepo;
     showDivider?: boolean;
     handleBranchDelete: (branch: string) => void;
-    handleBranchClick: (branch: string) => void;
 }) {
     const [loading, setLoading] = useState(false);
+    const orgName = useOrgName();
+
+    const editorLink = useMemo(
+        () =>
+            constructEditorSlug({
+                orgName,
+                docsUrl: encodeURIComponent(docsUrl) as EncodedDocsUrl,
+                branchName: branch,
+                slug: ROOT_SLUG_ALIAS
+            }),
+        [orgName, docsUrl, branch]
+    );
     return (
         <>
             <div className="flex items-center justify-between gap-x-4 gap-y-1">
@@ -37,19 +48,21 @@ export function BranchListItem({
                         variant="outline"
                         onClick={() => {
                             setLoading(true);
-                            handleBranchClick(branch);
                         }}
                         disabled={loading}
                         className="text-green-1100 hover:text-green-1100 min-w-[84px]"
+                        asChild={!loading}
                     >
-                        {loading ? (
-                            <Loader2 className="size-4 animate-spin" />
-                        ) : (
-                            <>
-                                Open
-                                <ArrowRight className="size-4" />
-                            </>
-                        )}
+                        <Link href={editorLink}>
+                            {loading ? (
+                                <Loader2 className="size-4 animate-spin" />
+                            ) : (
+                                <>
+                                    Open
+                                    <ArrowRight className="size-4" />
+                                </>
+                            )}
+                        </Link>
                     </Button>
                 </div>
             </div>

packages/fern-dashboard/src/components/docs-page/GoToEditorButton.tsx

@@ -69,12 +69,7 @@ export function GoToEditorButton({
                 >
                     <span className="pointer-events-auto">
                         <Button disabled={isLoading || disabled || isValidatingSource} asChild={!disabled}>
-                            <Link
-                                className="flex flex-row items-center gap-1"
-                                href={editorSlug}
-                                onClick={handleClick}
-                                prefetch
-                            >
+                            <Link className="flex flex-row items-center gap-1" href={editorSlug} onClick={handleClick}>
                                 {isLoading ? (
                                     <Loader2 className="animate-spin" />
                                 ) : (