fix: add window resize fallback and delay refresh to next frame
- Add window resize listener as fallback for ResizeObserver - Use 250ms debounce to avoid early layout reads - Delay term.refresh() to next animation frame so renderer can process resize before we force redraw - Clean up window resize listener on unmount
This commit is contained in:
@@ -229,7 +229,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
fitAddonRef.current.fit();
|
||||
const { cols, rows } = termRef.current;
|
||||
if (cols !== oldCols || rows !== oldRows) {
|
||||
termRef.current.refresh(0, rows - 1);
|
||||
// Delay refresh to next frame so renderer can process resize first
|
||||
requestAnimationFrame(() => {
|
||||
termRef.current?.refresh(0, rows - 1);
|
||||
});
|
||||
}
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({ type: "resize", cols, rows }));
|
||||
@@ -290,6 +293,19 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
});
|
||||
resizeObserver.observe(container);
|
||||
|
||||
// Also listen for window resize as fallback (ResizeObserver might miss some cases)
|
||||
let windowResizeTimeout: ReturnType<typeof setTimeout>;
|
||||
const handleWindowResize = () => {
|
||||
clearTimeout(windowResizeTimeout);
|
||||
windowResizeTimeout = setTimeout(() => {
|
||||
requestAnimationFrame(() => {
|
||||
if (!container.isConnected) return;
|
||||
fitTerminal();
|
||||
});
|
||||
}, 250);
|
||||
};
|
||||
window.addEventListener("resize", handleWindowResize);
|
||||
|
||||
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
|
||||
const headerHideTimeout = setTimeout(() => {
|
||||
fitTerminal();
|
||||
@@ -322,8 +338,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
|
||||
return () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
clearTimeout(windowResizeTimeout);
|
||||
clearTimeout(headerHideTimeout);
|
||||
resizeObserver.disconnect();
|
||||
window.removeEventListener("resize", handleWindowResize);
|
||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||
if (ws) {
|
||||
ws.close();
|
||||
|
||||
Reference in New Issue
Block a user