9ce3abc2b4
Batch-connecting N hosts called onConnect() in a synchronous forEach, so all N terminals mounted in one React commit and each createXTermRuntime() (which spins up a live WebGL context) ran back-to-back on the main thread, freezing the UI until the whole batch finished (~2-3s per host, linear). Spread the connects across frames via a small injectable-scheduler helper: the first host still connects synchronously so its tab appears immediately, the rest are deferred one step apart so no two heavy mounts land on the same frame. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
/**
|
|
* Schedule a batch of host connections across separate frames instead of all
|
|
* at once.
|
|
*
|
|
* Connecting many hosts in a single synchronous pass mounts every terminal in
|
|
* one React commit, so each terminal's `createXTermRuntime()` (which spins up a
|
|
* live WebGL context) runs back-to-back on the main thread and freezes the UI
|
|
* until the whole batch finishes. Staggering lets the first tab paint
|
|
* immediately and gives the renderer room to breathe between mounts.
|
|
*
|
|
* The first target connects synchronously so a tab shows up without delay; the
|
|
* rest are deferred one `stepMs` apart. `schedule` is injectable for testing.
|
|
*/
|
|
export type StaggerScheduler = (callback: () => void, delayMs: number) => void;
|
|
|
|
export interface ConnectHostsStaggeredOptions {
|
|
/** Gap between successive deferred connections, in ms. */
|
|
stepMs?: number;
|
|
/** Defers a callback; defaults to setTimeout. */
|
|
schedule?: StaggerScheduler;
|
|
}
|
|
|
|
const defaultSchedule: StaggerScheduler = (callback, delayMs) => {
|
|
setTimeout(callback, delayMs);
|
|
};
|
|
|
|
export function connectHostsStaggered<T>(
|
|
targets: T[],
|
|
onConnect: (target: T) => void,
|
|
options: ConnectHostsStaggeredOptions = {},
|
|
): void {
|
|
const stepMs = options.stepMs ?? 90;
|
|
const schedule = options.schedule ?? defaultSchedule;
|
|
|
|
targets.forEach((target, index) => {
|
|
if (index === 0) {
|
|
onConnect(target);
|
|
} else {
|
|
schedule(() => onConnect(target), index * stepMs);
|
|
}
|
|
});
|
|
}
|