Skip to content

Commit ca6d8c9

Browse files
sbawabesbawabe
authored
chore(dashboard): migrate expensive api calls to cached calls (#4697)
Fixes FER-6612 ## Short description of the changes made ## What was the motivation & context behind this PR? ## How has this PR been tested?
1 parent 521a689 commit ca6d8c9

File tree

27 files changed

+343
-367
lines changed

27 files changed

+343
-367
lines changed

‎packages/commons/docs-loader/src/readonly-docs-loader.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,15 @@ const loadWithUrl = async (domainKey: string): Promise<DocsV2Read.LoadDocsForUrl
9292
}
9393
if (branchName) {
9494
const response = await uncachedLoadWithUrl(domain);
95-
await visualEditorStorage.storeFdrSnapshot(domain, branchName, response);
95+
// Do not await this, we want to return the loadWithUrl response immediately
96+
visualEditorStorage
97+
.storeFdrSnapshot(domain, branchName, response)
98+
.then(() => {
99+
console.log(`[loadWithUrl] FDR snapshot stored for ${domain}:${branchName}`);
100+
})
101+
.catch((error) => {
102+
console.error(`[loadWithUrl] Failed to store FDR snapshot for ${domain}:${branchName}`, error);
103+
});
96104
return response;
97105
} else {
98106
const response = await cachedLoadWithUrl(domain);

‎packages/fern-dashboard/next.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@ let nextConfig: NextConfig = {
7373
hostname: "lh3.googleusercontent.com",
7474
port: "",
7575
pathname: "/**"
76+
},
77+
{
78+
protocol: "https",
79+
hostname: "prod-docs-homepage-images.s3.us-east-1.amazonaws.com",
80+
port: "",
81+
pathname: "/**"
7682
}
7783
],
7884
qualities: [75, 100]

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@devPanel/editor.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,25 @@ export default function MonacoEditor({
2020
}
2121
}, []);
2222

23-
// TODO: add a loading state
24-
if (isLoading) {
25-
return null;
26-
}
27-
2823
return (
29-
<CodeEditor
30-
height="100%"
31-
language="markdown"
32-
value={currentMarkdown}
33-
onMount={handleEditorDidMount}
34-
theme="app-theme"
35-
options={{
36-
minimap: { enabled: false },
37-
scrollBeyondLastLine: false,
38-
wordWrap: "on",
39-
readOnly: isEditingDisabled
40-
}}
41-
/>
24+
<>
25+
{isLoading ? (
26+
<div />
27+
) : (
28+
<CodeEditor
29+
height="100%"
30+
language="markdown"
31+
value={currentMarkdown}
32+
onMount={handleEditorDidMount}
33+
theme="app-theme"
34+
options={{
35+
minimap: { enabled: false },
36+
scrollBeyondLastLine: false,
37+
wordWrap: "on",
38+
readOnly: isEditingDisabled
39+
}}
40+
/>
41+
)}
42+
</>
4243
);
4344
}

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@headertabs/loading.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
13
export default function Loading() {
2-
return null;
4+
return (
5+
<div className="flex gap-2">
6+
<Skeleton className="h-9 w-16" />
7+
<Skeleton className="h-9 w-24" />
8+
<Skeleton className="h-9 w-20" />
9+
</div>
10+
);
311
}

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@headertabs/page.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,30 @@ import { slugjoin } from "@fern-api/fdr-sdk/navigation";
44
import { HeaderTabsList } from "@fern-docs/components/HeaderTabsList";
55
import { getRootAliasAwareNavigationSlug } from "@fern-docs/components/navigation";
66
import { getCurrentSession } from "@/app/services/auth0/getCurrentSession";
7+
import type { Auth0OrgName } from "@/app/services/auth0/types";
8+
import { assertAuthAndFetchGithubUrl } from "@/app/services/dal/github/assertAuthAndFetchGithubUrl";
79
import { getCachedEditableDocsLoader } from "@/app/services/docs-loader/cachedEditableDocsLoader";
810
import { getHostFromHeaders } from "@/utils/getHostFromHeaders";
11+
import { parseDocsUrlParam } from "@/utils/parseDocsUrlParam";
912
import type { EncodedDocsUrl } from "@/utils/types";
1013

1114
export default async function HeaderTabsPage({
1215
params
1316
}: {
14-
params: Promise<{ docsUrl: EncodedDocsUrl; slug: string; branch: string }>;
17+
params: Promise<{ orgName: Auth0OrgName; docsUrl: EncodedDocsUrl; slug: string; branch: string }>;
1518
}) {
16-
const { docsUrl, slug, branch } = await params;
19+
const { orgName, docsUrl, slug, branch } = await params;
1720
const session = await getCurrentSession();
21+
if (session == null) {
22+
return null;
23+
}
1824
const host = await getHostFromHeaders();
19-
// Use cached loader - this will reuse the loader created in layout.tsx
20-
const loader = await getCachedEditableDocsLoader({
21-
host,
22-
encodedDocsUrl: docsUrl,
23-
fernToken: session?.accessToken,
24-
branchName: branch
25+
const { githubUrl } = await assertAuthAndFetchGithubUrl({
26+
orgName,
27+
docsUrl: parseDocsUrlParam({ docsUrl })
2528
});
29+
// Use cached loader - this will reuse the loader created in layout.tsx
30+
const loader = await getCachedEditableDocsLoader(host, docsUrl, session.accessToken, branch, githubUrl);
2631
const layout = await loader.getLayout();
2732

2833
if (layout.tabsPlacement !== "HEADER") {

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@logo/loading.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
13
export default function Loading() {
2-
return null;
4+
return (
5+
<div className="flex items-center gap-2">
6+
<Skeleton className="size-7 rounded" />
7+
<Skeleton className="h-6 w-28" />
8+
</div>
9+
);
310
}

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@logo/page.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,13 @@ export default async function LogoPage({
1616
params: Promise<{ docsUrl: EncodedDocsUrl; slug: string; branch: string }>;
1717
}) {
1818
const session = await getCurrentSession();
19+
if (session == null) {
20+
return null;
21+
}
1922
const { docsUrl, slug, branch } = await params;
2023
const host = await getHostFromHeaders();
2124
// Use cached loader - this will reuse the loader created in layout.tsx
22-
const loader = await getCachedEditableDocsLoader({
23-
host,
24-
encodedDocsUrl: docsUrl,
25-
fernToken: session?.accessToken,
26-
branchName: branch
27-
});
25+
const loader = await getCachedEditableDocsLoader(host, docsUrl, session.accessToken, branch);
2826

2927
const [{ basePath }, config, files, root] = await Promise.all([
3028
loader.getMetadata(),

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@productSelect/page.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,16 @@ export default async function ProductSelectPage({
1616
params: Promise<{ docsUrl: EncodedDocsUrl; slug: string; branch: string }>;
1717
}) {
1818
const session = await getCurrentSession();
19+
if (session == null) {
20+
return null;
21+
}
1922
const { docsUrl, slug, branch } = await params;
2023
const host = await getHostFromHeaders();
2124
// Use cached loader - this will reuse the loader created in layout.tsx
22-
const loader = await getCachedEditableDocsLoader({
23-
host,
24-
encodedDocsUrl: docsUrl,
25-
fernToken: session?.accessToken,
26-
branchName: branch
27-
});
25+
const loader = await getCachedEditableDocsLoader(host, docsUrl, session?.accessToken, branch);
2826

2927
// preload:
30-
const [layout, _auth, _flags, root] = await Promise.all([
31-
loader.getLayout(),
32-
loader.getAuthState(),
33-
loader.getEdgeFlags(),
34-
loader.getRoot()
35-
]);
28+
const [layout, _auth, root] = await Promise.all([loader.getLayout(), loader.getAuthState(), loader.getRoot()]);
3629
const useDenseLayout = layout.isHeaderDisabled;
3730

3831
const navigationSlug = getRootAliasAwareNavigationSlug(slugjoin(slug), root);

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@sidebar/loading.tsx‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
1+
import { Skeleton } from "@/components/ui/skeleton";
2+
13
export default function Loading() {
2-
return null;
4+
return (
5+
<div className="flex flex-col gap-4 py-4">
6+
<Skeleton className="h-9 w-[70%]" />
7+
8+
<div className="flex flex-col gap-3 mt-2">
9+
<Skeleton className="h-4 w-[45%] font-semibold" />
10+
<div className="flex flex-col gap-1">
11+
<Skeleton className="h-7 w-[85%] ml-0" />
12+
<Skeleton className="h-7 w-[75%] ml-0" />
13+
<Skeleton className="h-7 w-[80%] ml-0" />
14+
<Skeleton className="h-7 w-[70%] ml-0" />
15+
<Skeleton className="h-7 w-[65%] ml-0" />
16+
</div>
17+
</div>
18+
19+
<div className="flex flex-col gap-3">
20+
<Skeleton className="h-4 w-[40%] font-semibold" />
21+
<div className="flex flex-col gap-1">
22+
<Skeleton className="h-7 w-[75%] ml-0" />
23+
<Skeleton className="h-7 w-[70%] ml-0" />
24+
</div>
25+
</div>
26+
27+
<div className="flex flex-col gap-3">
28+
<Skeleton className="h-4 w-[40%] font-semibold" />
29+
<div className="flex flex-col gap-1">
30+
<Skeleton className="h-7 w-[75%] ml-0" />
31+
</div>
32+
</div>
33+
34+
<div className="flex flex-col gap-3">
35+
<Skeleton className="h-4 w-[55%] font-semibold" />
36+
<div className="flex flex-col gap-1">
37+
<Skeleton className="h-7 w-[65%] ml-0" />
38+
<Skeleton className="h-7 w-[60%] ml-0" />
39+
</div>
40+
</div>
41+
</div>
42+
);
343
}

‎packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/@sidebar/page.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,23 @@ import type { PageNode as PageNodeNamespace } from "../PageNode";
1919
import PageSidebar from "./PageSidebar";
2020

2121
export default async function SidebarPage({
22-
params,
23-
searchParams
22+
params
2423
}: {
2524
params: Promise<{
2625
orgName: Auth0OrgName;
2726
docsUrl: EncodedDocsUrl;
2827
slug: string[];
2928
branch: string;
3029
}>;
31-
searchParams: Promise<Record<string, string>>;
3230
}) {
3331
const { orgName, docsUrl, branch, slug } = await params;
34-
const resolvedSearchParams = await searchParams;
3532
const session = await getCurrentSession();
33+
if (session == null) {
34+
return null;
35+
}
3636
const host = await getHostFromHeaders();
3737
// Use cached loader - this will reuse the loader created in layout.tsx
38-
const loader = await getCachedEditableDocsLoader({
39-
host,
40-
encodedDocsUrl: docsUrl,
41-
fernToken: session?.accessToken,
42-
branchName: branch
43-
});
38+
const loader = await getCachedEditableDocsLoader(host, docsUrl, session?.accessToken, branch);
4439
const [config, authState, edgeFlags, layout, files] = await Promise.all([
4540
loader.getConfig(),
4641
loader.getAuthState(),

0 commit comments

Comments
 (0)