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();
|
fitAddonRef.current.fit();
|
||||||
const { cols, rows } = termRef.current;
|
const { cols, rows } = termRef.current;
|
||||||
if (cols !== oldCols || rows !== oldRows) {
|
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) {
|
if (ws.readyState === WebSocket.OPEN) {
|
||||||
ws.send(JSON.stringify({ type: "resize", cols, rows }));
|
ws.send(JSON.stringify({ type: "resize", cols, rows }));
|
||||||
@@ -290,6 +293,19 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
});
|
});
|
||||||
resizeObserver.observe(container);
|
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)
|
// Refit after mobile header auto-hides (3s delay + 0.3s transition)
|
||||||
const headerHideTimeout = setTimeout(() => {
|
const headerHideTimeout = setTimeout(() => {
|
||||||
fitTerminal();
|
fitTerminal();
|
||||||
@@ -322,8 +338,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
|||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
clearTimeout(resizeTimeout);
|
clearTimeout(resizeTimeout);
|
||||||
|
clearTimeout(windowResizeTimeout);
|
||||||
clearTimeout(headerHideTimeout);
|
clearTimeout(headerHideTimeout);
|
||||||
resizeObserver.disconnect();
|
resizeObserver.disconnect();
|
||||||
|
window.removeEventListener("resize", handleWindowResize);
|
||||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||||
if (ws) {
|
if (ws) {
|
||||||
ws.close();
|
ws.close();
|
||||||
|
|||||||
Reference in New Issue
Block a user