Skip to content

fix(app): eliminate session switch latency — deferRender, Suspense flash, instant rendering #27912

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BYK wants to merge 3 commits into
base: dev
Choose a base branch
from
+11 −16
Open

fix(app): eliminate session switch latency — deferRender, Suspense flash, instant rendering #27912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e98db06
fix(app): eliminate 170ms session switch delay from deferRender + com…
BYK May 16, 2026
c53fb12
fix(app): prevent session switch from triggering Suspense splash screen
BYK May 16, 2026
e815cbd
fix(app): instant session switching — render immediately with cached …
BYK May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions packages/app/src/pages/session.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,7 +450,8 @@ export default function Page() {
const messagesReady = createMemo(() => {
const id = params.id
if (!id) return true
return sync.data.message[id] !== undefined
// Ready if messages are loaded OR the session exists in the list (show immediately, load in background)
return sync.data.message[id] !== undefined || sync.session.get(id) !== undefined
})
const historyMore = createMemo(() => {
const id = params.id
Expand Down Expand Up @@ -536,12 +537,6 @@ export default function Page() {

createComputed((prev) => {
const key = sessionKey()
if (key !== prev) {
setStore("deferRender", true)
requestAnimationFrame(() => {
setTimeout(() => setStore("deferRender", false), 0)
})
}
return key
}, sessionKey())

Expand Down Expand Up @@ -755,7 +750,7 @@ export default function Page() {

const hasScrollGesture = () => Date.now() - ui.scrollGesture < scrollGestureWindowMs

const [sessionSync] = createResource(
createResource(
() => [sdk.directory, params.id] as const,
([directory, id]) => {
if (refreshFrame !== undefined) cancelAnimationFrame(refreshFrame)
Expand Down Expand Up @@ -1124,7 +1119,7 @@ export default function Page() {
loadingClass: string
emptyClass: string
}) => (
<Show when={!store.deferRender}>
<Show when={true}>
<SessionReviewTab
title={changesTitle()}
empty={reviewEmpty(input)}
Expand Down Expand Up @@ -1789,7 +1784,6 @@ export default function Page() {

return (
<div class="relative bg-background-base size-full overflow-hidden flex flex-col">
{sessionSync() ?? ""}
<SessionHeader />
<div class="flex-1 min-h-0 flex flex-col md:flex-row">
<Show when={!isDesktop() && !!params.id}>
Expand Down Expand Up @@ -1882,7 +1876,7 @@ export default function Page() {

<SessionComposerRegion
state={composer}
ready={!store.deferRender && messagesReady()}
ready={messagesReady()}
centered={centered()}
inputRef={(el) => {
inputRef = el
Expand Down
6 changes: 1 addition & 5 deletions packages/app/src/pages/session/composer/session-composer-region.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,18 +99,14 @@ export function SessionComposerRegion(props: {
createEffect(() => {
route.sessionKey()
const ready = props.ready
const delay = 140

clear()
setStore("ready", false)
if (!ready) return

frame = requestAnimationFrame(() => {
frame = undefined
timer = window.setTimeout(() => {
setStore("ready", true)
timer = undefined
}, delay)
setStore("ready", true)
})
})

Expand Down
5 changes: 5 additions & 0 deletions packages/app/src/pages/session/message-timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1021,6 +1021,11 @@ export function MessageTimeline(props: {
</Button>
</div>
</Show>
<Show when={props.renderedUserMessages.length === 0 && props.historyLoading}>
<div class="flex items-center justify-center py-12">
<Spinner />
</div>
</Show>
<For each={rendered()}>
{(messageID) => {
const active = createMemo(() => activeMessageID() === messageID)
Expand Down
Loading