Fit on initial mount instead of on reconnect

code-asher · code-asher · commit beea986ca183 · 2023-10-10T18:03:45.000-08:00
Reconnecting does not change any sizes so we only need to do it on the
initial mount and when the window size changes.
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -47,7 +47,6 @@ const TerminalPage: FC = () => {
   const workspaceName = params.workspace;
   const xtermRef = useRef<HTMLDivElement>(null);
   const [terminal, setTerminal] = useState<XTerm.Terminal | null>(null);
-  const [fitAddon, setFitAddon] = useState<FitAddon | null>(null);
   const [searchParams] = useSearchParams();
   // The reconnection token is a unique token that identifies
   // a terminal session. It's generated by the client to reduce
@@ -173,7 +172,6 @@ const TerminalPage: FC = () => {
       terminal.loadAddon(new CanvasAddon());
     }
     const fitAddon = new FitAddon();
-    setFitAddon(fitAddon);
     terminal.loadAddon(fitAddon);
     terminal.loadAddon(new Unicode11Addon());
     terminal.unicode.activeVersion = "11";
@@ -190,6 +188,16 @@ const TerminalPage: FC = () => {
         },
       });
     });
+
+    terminal.open(xtermRef.current);
+
+    // We have to fit twice here. It's unknown why, but the first fit will
+    // overflow slightly in some scenarios. Applying a second fit resolves this.
+    fitAddon.fit();
+    fitAddon.fit();
+
+    // The initial size will be sent on connection.  For future resizes, add a
+    // listener to update the backend (this triggers on fit()).
     terminal.onResize((event) => {
       sendEvent({
         type: "WRITE",
@@ -199,13 +207,14 @@ const TerminalPage: FC = () => {
         },
       });
     });
-    setTerminal(terminal);
-    terminal.open(xtermRef.current);
-    const listener = () => {
-      // This will trigger a resize event on the terminal.
-      fitAddon.fit();
-    };
+
+    // Run a fit every time the window size changes.
+    const listener = () => fitAddon.fit();
     window.addEventListener("resize", listener);
+
+    // Terminal is now ready.
+    setTerminal(terminal);
+
     return () => {
       window.removeEventListener("resize", listener);
       terminal.dispose();
@@ -232,16 +241,10 @@ const TerminalPage: FC = () => {
 
   // Apply terminal options based on connection state.
   useEffect(() => {
-    if (!terminal || !fitAddon) {
+    if (!terminal) {
       return;
     }
 
-    // We have to fit twice here. It's unknown why, but
-    // the first fit will overflow slightly in some
-    // scenarios. Applying a second fit resolves this.
-    fitAddon.fit();
-    fitAddon.fit();
-
     if (!isConnected) {
       // Disable user input when not connected.
       terminal.options = {
@@ -278,7 +281,10 @@ const TerminalPage: FC = () => {
       windowsMode: workspaceAgent?.operating_system === "windows",
     };
 
-    // Update the terminal size post-fit.
+    // Send the initial terminal size.
+    // Ideally this would happen together with the connection via the query
+    // parameters on the web socket URL to avoid the extra trip and possible
+    // weirdness of starting at a different size and immediately resizing.
     sendEvent({
       type: "WRITE",
       request: {
@@ -292,7 +298,6 @@ const TerminalPage: FC = () => {
     websocketError,
     workspaceAgent,
     terminal,
-    fitAddon,
     isConnected,
     sendEvent,
   ]);
