Skip to content

Commit 90c811d

Browse files
pascalandrpascalandr
committed
perf(ui): defer picker and monaco panel viewers
1 parent f53b02b commit 90c811d

5 files changed

Lines changed: 75 additions & 42 deletions

File tree

‎packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
2-
3-
import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
1+
import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
42

53
import DiffToolbar from "../components/DiffToolbar"
64
import SplitFilePanel from "../components/SplitFilePanel"
75
import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
86

7+
const LazyMonacoDiffViewer = lazy(() =>
8+
import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
9+
)
10+
911
interface ChangesTabProps {
1012
t: (key: string, vars?: Record<string, any>) => string
1113

@@ -113,15 +115,17 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
113115
}
114116
>
115117
{(file) => (
116-
<MonacoDiffViewer
117-
scopeKey={scopeKey()}
118-
path={String(file().file || "")}
119-
before={String((file() as any).before || "")}
120-
after={String((file() as any).after || "")}
121-
viewMode={props.diffViewMode()}
122-
contextMode={props.diffContextMode()}
123-
wordWrap={props.diffWordWrapMode()}
124-
/>
118+
<Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">Loading diff…</span></div>}>
119+
<LazyMonacoDiffViewer
120+
scopeKey={scopeKey()}
121+
path={String(file().file || "")}
122+
before={String((file() as any).before || "")}
123+
after={String((file() as any).after || "")}
124+
viewMode={props.diffViewMode()}
125+
contextMode={props.diffContextMode()}
126+
wordWrap={props.diffWordWrapMode()}
127+
/>
128+
</Suspense>
125129
)}
126130
</Show>
127131
</div>

‎packages/ui/src/components/instance/shell/right-panel/tabs/FilesTab.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ const FilesTab: Component<FilesTabProps> = (props) => {
5353
const headerDisplayedPath = () => props.browserSelectedPath() || props.browserPath()
5454

5555
const emptyViewerMessage = () => {
56-
if (props.browserLoading() && entriesValue === null) return props.t("instanceInfo.loading")
57-
return props.t("instanceShell.filesShell.viewerEmpty")
56+
if (props.browserLoading() && entriesValue === null) return "Loading files..."
57+
return "Select a file to preview"
5858
}
5959

6060
const renderViewer = () => (
@@ -79,7 +79,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
7979
}
8080
>
8181
{(payload) => (
82-
<Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span></div>}>
82+
<Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">Loading file…</span></div>}>
8383
<LazyMonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
8484
</Suspense>
8585
)}
@@ -95,7 +95,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
9595
}
9696
>
9797
<div class="file-viewer-empty">
98-
<span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
98+
<span class="file-viewer-empty-text">Loading…</span>
9999
</div>
100100
</Show>
101101
</div>
@@ -117,7 +117,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
117117
</Show>
118118

119119
<Show when={props.browserLoading() && entriesValue === null}>
120-
<div class="p-3 text-xs text-secondary">{props.t("instanceInfo.loading")}</div>
120+
<div class="p-3 text-xs text-secondary">Loading files...</div>
121121
</Show>
122122

123123
<For each={sorted}>
@@ -158,7 +158,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
158158
</span>
159159
</span>
160160
<Show when={props.browserLoading()}>
161-
<span>{props.t("instanceInfo.loading")}</span>
161+
<span>Loading…</span>
162162
</Show>
163163
<Show when={props.browserError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
164164
</div>
@@ -184,7 +184,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
184184
onResizeMouseDown={props.onResizeMouseDown}
185185
onResizeTouchStart={props.onResizeTouchStart}
186186
isPhoneLayout={props.isPhoneLayout()}
187-
overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.files")}
187+
overlayAriaLabel="Files"
188188
/>
189189
)
190190
}

‎packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
8282
})
8383

8484
const emptyViewerMessage = createMemo(() => {
85-
if (!hasSession()) return props.t("instanceShell.sessionChanges.noSessionSelected")
85+
if (!hasSession()) return "Select a session to view changes."
8686
const currentEntries = entries()
87-
if (currentEntries === null) return props.t("instanceShell.sessionChanges.loading")
88-
if (nonDeleted().length === 0) return props.t("instanceShell.sessionChanges.empty")
89-
return props.t("instanceShell.filesShell.viewerEmpty")
87+
if (currentEntries === null) return "Loading git changes…"
88+
if (nonDeleted().length === 0) return "No git changes yet."
89+
return "No file selected."
9090
})
9191

9292
const renderContent = (): JSX.Element => {
@@ -124,7 +124,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
124124
}
125125
>
126126
{(file) => (
127-
<Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">{props.t("instanceShell.sessionChanges.loading")}</span></div>}>
127+
<Suspense fallback={<div class="file-viewer-empty"><span class="file-viewer-empty-text">Loading diff…</span></div>}>
128128
<LazyMonacoDiffViewer
129129
scopeKey={props.scopeKey()}
130130
path={String(file().path || "")}
@@ -148,7 +148,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
148148
}
149149
>
150150
<div class="file-viewer-empty">
151-
<span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
151+
<span class="file-viewer-empty-text">Loading…</span>
152152
</div>
153153
</Show>
154154
</div>
@@ -224,8 +224,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
224224
<SplitFilePanel
225225
header={
226226
<>
227-
<span class="files-tab-selected-path" title={selected?.path || props.t("instanceShell.rightPanel.tabs.gitChanges")}>
228-
<span class="file-path-text">{selected?.path || props.t("instanceShell.rightPanel.tabs.gitChanges")}</span>
227+
<span class="files-tab-selected-path" title={selected?.path || "Git Changes"}>
228+
<span class="file-path-text">{selected?.path || "Git Changes"}</span>
229229
</span>
230230

231231
<div class="files-tab-stats" style={{ flex: "0 0 auto" }}>

‎packages/ui/src/components/prompt-input.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { createSignal, Show, onMount, onCleanup, createEffect, on } from "solid-js"
1+
import { Suspense, createEffect, createSignal, lazy, on, onCleanup, onMount, Show } from "solid-js"
22
import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
3-
import UnifiedPicker from "./unified-picker"
43
import ExpandButton from "./expand-button"
54
import { clearAttachments, removeAttachment } from "../stores/attachments"
65
import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
@@ -18,6 +17,7 @@ import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
1817
import { usePromptPicker } from "./prompt-input/usePromptPicker"
1918
import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
2019
const log = getLogger("actions")
20+
const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
2121

2222
export default function PromptInput(props: PromptInputProps) {
2323
const { t } = useI18n()
@@ -428,18 +428,20 @@ export default function PromptInput(props: PromptInputProps) {
428428
onDrop={handleDrop}
429429
>
430430
<Show when={showPicker() && instance()}>
431-
<UnifiedPicker
432-
open={showPicker()}
433-
mode={pickerMode()}
434-
onClose={handlePickerClose}
435-
onSelect={handlePickerSelect}
436-
agents={instanceAgents()}
437-
commands={getCommands(props.instanceId)}
438-
instanceClient={instance()!.client}
439-
searchQuery={searchQuery()}
440-
textareaRef={textareaRef}
441-
workspaceId={props.instanceId}
442-
/>
431+
<Suspense fallback={null}>
432+
<LazyUnifiedPicker
433+
open={showPicker()}
434+
mode={pickerMode()}
435+
onClose={handlePickerClose}
436+
onSelect={handlePickerSelect}
437+
agents={instanceAgents()}
438+
commands={getCommands(props.instanceId)}
439+
instanceClient={instance()!.client}
440+
searchQuery={searchQuery()}
441+
textareaRef={textareaRef}
442+
workspaceId={props.instanceId}
443+
/>
444+
</Suspense>
443445
</Show>
444446

445447
<div class="flex flex-1 flex-col">

‎packages/ui/vite.config.ts‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,6 @@ export default defineConfig({
116116
resolve: {
117117
alias: {
118118
"@": resolve(__dirname, "./src"),
119-
"@git-diff-view/lowlight": resolve(__dirname, "./src/lib/git-diff-lowlight.ts"),
120119
},
121120
},
122121
optimizeDeps: {
@@ -135,6 +134,34 @@ export default defineConfig({
135134
main: resolve(__dirname, "./src/renderer/index.html"),
136135
loading: resolve(__dirname, "./src/renderer/loading.html"),
137136
},
137+
output: {
138+
manualChunks(id) {
139+
const normalizedId = id.replace(/\\/g, "/")
140+
141+
if (normalizedId.includes("/node_modules/@git-diff-view/")) {
142+
return "git-diff-vendor"
143+
}
144+
145+
if (normalizedId.includes("/node_modules/highlight.js/") || normalizedId.includes("/node_modules/lowlight/")) {
146+
return "highlight-vendor"
147+
}
148+
149+
if (normalizedId.includes("/node_modules/fast-diff/")) {
150+
return "fast-diff-vendor"
151+
}
152+
153+
if (normalizedId.includes("/node_modules/monaco-editor/")) {
154+
return "monaco-vendor"
155+
}
156+
157+
if (
158+
normalizedId.includes("/src/components/file-viewer/") ||
159+
normalizedId.includes("/src/lib/monaco/")
160+
) {
161+
return "monaco-viewer"
162+
}
163+
},
164+
},
138165
},
139166
},
140167
})

0 commit comments

Comments
 (0)