Debounce server resize calls

Author: filiptronicek

src/client.ts

@@ -15,6 +15,7 @@ import { webLinksHandler } from "./lib/addons";
 import { initiateRemoteCommunicationChannelSocket } from "./lib/remote";
 import { Emitter } from '@gitpod/gitpod-protocol/lib/util/event';
 import { DisposableCollection } from '@gitpod/gitpod-protocol/lib/util/disposable';
+import { debounce } from './lib/helpers';
 
 const onDidChangeState = new Emitter<void>();
 let state: IDEFrontendState = "initializing" as IDEFrontendState;
@@ -238,7 +239,8 @@ function updateTerminalSize(): void {
     fitAddon.fit();
 }
 
-window.onresize = () => updateTerminalSize();
+const debouncedUpdateTerminalSize = debounce(updateTerminalSize, 200, true);
+window.onresize = () => debouncedUpdateTerminalSize();
 
 window.gitpod.ideService = {
     get state() {

src/lib/helpers.ts

@@ -0,0 +1,31 @@
+/**
+ * Debounces a function by limiting the rate at which it is called.
+ * The debounced function will be called immediately when first called,
+ * and then at most once every `wait` milliseconds during subsequent calls.
+ * If `trailing` is set to `true`, the function will also be called once
+ * after the last event is triggered.
+ *
+ * @param {() => void} func - The function to be debounced.
+ * @param {number} wait - The number of milliseconds to wait before allowing the function to be called again.
+ * @param {boolean} trailing - Whether to call the function once after the last event is triggered.
+ * @returns {() => void} - The debounced function.
+ */
+export const debounce = (func: () => void, wait: number, trailing: boolean): () => void => {
+    let timeout: NodeJS.Timeout | null = null;
+
+    return () => {
+        const later = () => {
+            timeout = null;
+            if (trailing) {
+                func();
+            }
+        };
+
+        if (timeout === null) {
+            func();
+        } else {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(later, wait);
+    };
+}