From f18f0d3b344c097776176bce47e823e7f09e91fb Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Wed, 9 Oct 2024 17:39:35 -0400
Subject: [PATCH] performance improvements

---
 .../ui/app/src/api-reference/ApiEndpointPage.tsx  | 14 +++++++++++---
 .../app/src/api-reference/ApiPackageContent.tsx   | 12 ++++++++++++
 .../ui/app/src/api-reference/ApiReferencePage.tsx | 15 ++++++++++++---
 packages/ui/app/src/resolver/DocsContent.ts       |  4 ++--
 .../ui/app/src/resolver/resolveApiEndpointPage.ts |  2 +-
 .../app/src/resolver/resolveApiReferencePage.ts   |  2 +-
 packages/ui/docs-bundle/src/server/DocsLoader.ts  |  3 +++
 7 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/ui/app/src/api-reference/ApiEndpointPage.tsx b/packages/ui/app/src/api-reference/ApiEndpointPage.tsx
index 200ce05d8c..9ad9eacebe 100644
--- a/packages/ui/app/src/api-reference/ApiEndpointPage.tsx
+++ b/packages/ui/app/src/api-reference/ApiEndpointPage.tsx
@@ -2,14 +2,14 @@ import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { EMPTY_OBJECT } from "@fern-api/ui-core-utils";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
-import { WRITE_API_DEFINITION_ATOM } from "../atoms";
+import { WRITE_API_DEFINITION_ATOM, useNavigationNodes } from "../atoms";
 import { ALL_ENVIRONMENTS_ATOM } from "../atoms/environment";
 import { BottomNavigationNeighbors } from "../components/BottomNavigationNeighbors";
 import { FernErrorBoundary } from "../components/FernErrorBoundary";
 import { ApiPageContext } from "../contexts/api-page";
 import { DocsContent } from "../resolver/DocsContent";
 import { BuiltWithFern } from "../sidebar/BuiltWithFern";
-import { ApiPackageContent } from "./ApiPackageContent";
+import { ApiPackageContent, isApiPackageContentNode } from "./ApiPackageContent";
 
 export declare namespace ApiEndpointPage {
     export interface Props {
@@ -37,11 +37,19 @@ export const ApiEndpointPage: React.FC<ApiEndpointPage.Props> = ({ content }) =>
         });
     }, [content.apiDefinition.endpoints, content.apiDefinition.websockets, setEnvironmentIds]);
 
+    const node = useNavigationNodes().get(content.nodeId);
+    if (!node || !isApiPackageContentNode(node)) {
+        // TODO: sentry
+        // eslint-disable-next-line no-console
+        console.error("Expected node to be an api reference node");
+        return null;
+    }
+
     return (
         <ApiPageContext.Provider value={true}>
             <FernErrorBoundary component="ApiEndpointPage">
                 <ApiPackageContent
-                    node={content.item}
+                    node={node}
                     apiDefinition={content.apiDefinition}
                     breadcrumb={content.breadcrumb}
                     mdxs={EMPTY_OBJECT}
diff --git a/packages/ui/app/src/api-reference/ApiPackageContent.tsx b/packages/ui/app/src/api-reference/ApiPackageContent.tsx
index a5b992b018..b538ca0d1f 100644
--- a/packages/ui/app/src/api-reference/ApiPackageContent.tsx
+++ b/packages/ui/app/src/api-reference/ApiPackageContent.tsx
@@ -21,6 +21,18 @@ export type ApiPackageContentNode =
     | FernNavigation.ApiReferenceNode
     | Exclude<FernNavigation.ApiPackageChild, FernNavigation.LinkNode>;
 
+export function isApiPackageContentNode(node: FernNavigation.NavigationNode): node is ApiPackageContentNode {
+    return (
+        node.type === "apiReference" ||
+        node.type === "apiPackage" ||
+        node.type === "endpoint" ||
+        node.type === "webhook" ||
+        node.type === "webSocket" ||
+        node.type === "page" ||
+        node.type === "endpointPair"
+    );
+}
+
 interface ApiPackageContentProps {
     node: ApiPackageContentNode;
     apiDefinition: ApiDefinition;
diff --git a/packages/ui/app/src/api-reference/ApiReferencePage.tsx b/packages/ui/app/src/api-reference/ApiReferencePage.tsx
index 73ab9a594a..aa62437d3b 100644
--- a/packages/ui/app/src/api-reference/ApiReferencePage.tsx
+++ b/packages/ui/app/src/api-reference/ApiReferencePage.tsx
@@ -1,6 +1,6 @@
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
-import { WRITE_API_DEFINITION_ATOM, useIsReady } from "../atoms";
+import { WRITE_API_DEFINITION_ATOM, useIsReady, useNavigationNodes } from "../atoms";
 import { ApiPageContext } from "../contexts/api-page";
 import { DocsContent } from "../resolver/DocsContent";
 import { BuiltWithFern } from "../sidebar/BuiltWithFern";
@@ -18,12 +18,21 @@ export const ApiReferencePage: React.FC<ApiReferencePage.Props> = ({ content })
     const set = useSetAtom(WRITE_API_DEFINITION_ATOM);
     useEffect(() => set(content.apiDefinition), [content.apiDefinition, set]);
 
+    const node = useNavigationNodes().get(content.apiReferenceNodeId);
+
+    if (node?.type !== "apiReference") {
+        // TODO: sentry
+        // eslint-disable-next-line no-console
+        console.error("Expected node to be an api reference node");
+        return null;
+    }
+
     return (
         <ApiPageContext.Provider value={true}>
             <ApiReferenceContent
                 apiDefinition={content.apiDefinition}
-                showErrors={content.apiReferenceNode.showErrors ?? false}
-                node={content.apiReferenceNode}
+                showErrors={node.showErrors ?? false}
+                node={node}
                 breadcrumb={content.breadcrumb}
                 mdxs={content.mdxs}
                 slug={content.slug}
diff --git a/packages/ui/app/src/resolver/DocsContent.ts b/packages/ui/app/src/resolver/DocsContent.ts
index 8a3b1b99fd..0d49a24ea5 100644
--- a/packages/ui/app/src/resolver/DocsContent.ts
+++ b/packages/ui/app/src/resolver/DocsContent.ts
@@ -46,7 +46,7 @@ export declare namespace DocsContent {
     interface ApiEndpointPage {
         type: "api-endpoint-page";
         slug: FernNavigation.Slug;
-        item: FernNavigation.EndpointPairNode | FernNavigation.NavigationNodeApiLeaf;
+        nodeId: FernNavigation.NodeId;
         breadcrumb: readonly FernNavigation.BreadcrumbItem[];
         apiDefinition: ApiDefinition;
         showErrors: boolean;
@@ -63,7 +63,7 @@ export declare namespace DocsContent {
         // TODO: the api reference node is probably duplicated in the initial props
         // so we should deduplicate it to avoid sending it twice
         breadcrumb: readonly FernNavigation.BreadcrumbItem[]; // this is the breadcrumb up to the api reference node
-        apiReferenceNode: FernNavigation.ApiReferenceNode;
+        apiReferenceNodeId: FernNavigation.NodeId;
         apiDefinition: ApiDefinition;
     }
 }
diff --git a/packages/ui/app/src/resolver/resolveApiEndpointPage.ts b/packages/ui/app/src/resolver/resolveApiEndpointPage.ts
index e740720879..3c825721dd 100644
--- a/packages/ui/app/src/resolver/resolveApiEndpointPage.ts
+++ b/packages/ui/app/src/resolver/resolveApiEndpointPage.ts
@@ -48,7 +48,7 @@ export async function resolveApiEndpointPage({
     return {
         type: "api-endpoint-page",
         slug: node.slug,
-        item: parent?.type === "endpointPair" ? parent : node,
+        nodeId: parent?.type === "endpointPair" ? parent.id : node.id,
         apiDefinition,
         showErrors: showErrors ?? false,
         neighbors,
diff --git a/packages/ui/app/src/resolver/resolveApiReferencePage.ts b/packages/ui/app/src/resolver/resolveApiReferencePage.ts
index 80325bb7f4..c19dd8351e 100644
--- a/packages/ui/app/src/resolver/resolveApiReferencePage.ts
+++ b/packages/ui/app/src/resolver/resolveApiReferencePage.ts
@@ -72,7 +72,7 @@ export async function resolveApiReferencePage({
     return {
         type: "api-reference-page",
         slug: node.slug,
-        apiReferenceNode,
+        apiReferenceNodeId: apiReferenceNode.id,
         apiDefinition,
         mdxs,
         breadcrumb,
diff --git a/packages/ui/docs-bundle/src/server/DocsLoader.ts b/packages/ui/docs-bundle/src/server/DocsLoader.ts
index 129b0714f8..3a6014e366 100644
--- a/packages/ui/docs-bundle/src/server/DocsLoader.ts
+++ b/packages/ui/docs-bundle/src/server/DocsLoader.ts
@@ -43,6 +43,9 @@ export class DocsLoader {
         if (!this.auth) {
             return [undefined, undefined];
         }
+        if (!this.fernToken) {
+            return [undefined, this.auth];
+        }
         try {
             return [await withAuthProps(this.auth, this.fernToken), this.auth];
         } catch (e) {