From 2b42146bc600a70beb86b87346892145cc60647d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cristian=20Pallar=C3=A9s?= <cristianp@wing.cloud>
Date: Mon, 5 Aug 2024 18:45:40 +0200
Subject: [PATCH] fix(console): logs not fetched after throttle (#6984)

The throttle mechanism didn't implement a trailing call but was
necessary in order to provide the expected UX.
---
 .../packages/utilities/src/debounce.test.ts   | 12 +++++++---
 .../packages/utilities/src/debounce.ts        |  5 ++--
 .../packages/utilities/src/throttle.test.ts   | 23 +++++++------------
 .../packages/utilities/src/throttle.ts        | 15 ++++++++++--
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/apps/wing-console/packages/utilities/src/debounce.test.ts b/apps/wing-console/packages/utilities/src/debounce.test.ts
index 43fa1c9a856..4314447af01 100644
--- a/apps/wing-console/packages/utilities/src/debounce.test.ts
+++ b/apps/wing-console/packages/utilities/src/debounce.test.ts
@@ -10,15 +10,21 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-test("debounces calls", () => {
+test("debounces invokations", () => {
   const function_ = vi.fn();
-  const debounced = debounce(function_, 1);
+  const debounced = debounce(function_, 100);
 
   debounced();
   debounced();
   debounced();
   expect(function_).toHaveBeenCalledTimes(0);
 
-  vi.advanceTimersByTime(1);
+  vi.advanceTimersByTime(99);
+  debounced();
+  debounced();
+  debounced();
+  expect(function_).toHaveBeenCalledTimes(0);
+
+  vi.advanceTimersByTime(100);
   expect(function_).toHaveBeenCalledTimes(1);
 });
diff --git a/apps/wing-console/packages/utilities/src/debounce.ts b/apps/wing-console/packages/utilities/src/debounce.ts
index 80cf1d4c01d..68ad58a3be4 100644
--- a/apps/wing-console/packages/utilities/src/debounce.ts
+++ b/apps/wing-console/packages/utilities/src/debounce.ts
@@ -1,3 +1,6 @@
+/**
+ * Debounce a function to be called after `wait` milliseconds has passed since the last call.
+ */
 export function debounce<T extends (...arguments_: any[]) => void>(
   function_: T,
   wait: number,
@@ -8,8 +11,6 @@ export function debounce<T extends (...arguments_: any[]) => void>(
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       timeout = undefined;
-
-      // Trailing call.
       function_(...arguments_);
     }, wait);
   };
diff --git a/apps/wing-console/packages/utilities/src/throttle.test.ts b/apps/wing-console/packages/utilities/src/throttle.test.ts
index 1057b044d4a..d6569eeca1d 100644
--- a/apps/wing-console/packages/utilities/src/throttle.test.ts
+++ b/apps/wing-console/packages/utilities/src/throttle.test.ts
@@ -10,30 +10,23 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-test("throttles calls", () => {
+test("throttles invokations during the time frame", () => {
   const function_ = vi.fn();
   const throttled = throttle(function_, 100);
 
   throttled();
-  throttled();
-  throttled();
-  expect(function_).toHaveBeenCalledTimes(1);
-
   vi.advanceTimersByTime(99);
   throttled();
-  throttled();
-  throttled();
   expect(function_).toHaveBeenCalledTimes(1);
+});
+
+test("throttles with a leading and trailing invokation", () => {
+  const function_ = vi.fn();
+  const throttled = throttle(function_, 100);
 
-  vi.advanceTimersByTime(1);
-  throttled();
-  throttled();
   throttled();
-  expect(function_).toHaveBeenCalledTimes(2);
+  expect(function_).toHaveBeenCalledTimes(1);
 
   vi.advanceTimersByTime(100);
-  throttled();
-  throttled();
-  throttled();
-  expect(function_).toHaveBeenCalledTimes(3);
+  expect(function_).toHaveBeenCalledTimes(2);
 });
diff --git a/apps/wing-console/packages/utilities/src/throttle.ts b/apps/wing-console/packages/utilities/src/throttle.ts
index 90e8c63e090..33af0dd5597 100644
--- a/apps/wing-console/packages/utilities/src/throttle.ts
+++ b/apps/wing-console/packages/utilities/src/throttle.ts
@@ -1,13 +1,24 @@
+/**
+ * Throttle a function to be called at most once every `wait` milliseconds.
+ *
+ * Includes a leading and a trailing call.
+ */
 export function throttle<T extends (...arguments_: any[]) => void>(
   function_: T,
-  timeFrame: number,
+  wait: number,
 ): (...arguments_: Parameters<T>) => void {
   let lastTime: number | undefined;
+  let timeout: NodeJS.Timeout | undefined;
   return (...arguments_) => {
     const now = Date.now();
-    if (lastTime === undefined || now - lastTime >= timeFrame) {
+    if (lastTime === undefined || now - lastTime >= wait) {
       function_(...arguments_);
       lastTime = now;
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        timeout = undefined;
+        function_(...arguments_);
+      }, wait);
     }
   };
 }