Debounces user's typing

(#3543)

Author: sergeibbb

src/plus/launchpad/launchpad.ts

@@ -50,6 +50,7 @@ import { getScopedCounter } from '../../system/counter';
 import { fromNow } from '../../system/date';
 import { some } from '../../system/iterable';
 import { interpolate, pluralize } from '../../system/string';
+import { createAsyncDebouncer } from '../../system/vscode/asyncDebouncer';
 import { executeCommand } from '../../system/vscode/command';
 import { configuration } from '../../system/vscode/configuration';
 import { openUrl } from '../../system/vscode/utils';
@@ -149,6 +150,7 @@ const instanceCounter = getScopedCounter();
 const defaultCollapsedGroups: LaunchpadGroup[] = ['draft', 'other', 'snoozed'];
 
 export class LaunchpadCommand extends QuickCommand<State> {
+	private readonly updateItemsDebouncer = createAsyncDebouncer(500);
 	private readonly source: Source;
 	private readonly telemetryContext: LaunchpadTelemetryContext | undefined;
 
@@ -458,7 +460,7 @@ export class LaunchpadCommand extends QuickCommand<State> {
 			};
 		};
 
-		const getItems = (result: LaunchpadCategorizedResult) => {
+		const getItems = (result: LaunchpadCategorizedResult, treatAllGroupAsExpanded?: boolean) => {
 			const items: (LaunchpadItemQuickPickItem | DirectiveQuickPickItem | ConnectMoreIntegrationsItem)[] = [];
 
 			if (result.items?.length) {
@@ -475,7 +477,7 @@ export class LaunchpadCommand extends QuickCommand<State> {
 
 					items.push(...buildGroupHeading(ui, groupItems.length));
 
-					if (context.collapsed.get(ui)) continue;
+					if (!treatAllGroupAsExpanded && context.collapsed.get(ui)) continue;
 
 					items.push(...groupItems.map(i => buildLaunchpadQuickPickItem(i, ui, topItem)));
 				}
@@ -484,7 +486,7 @@ export class LaunchpadCommand extends QuickCommand<State> {
 			return items;
 		};
 
-		function getItemsAndPlaceholder() {
+		function getItemsAndPlaceholder(treatAllGroupAsExpanded?: boolean) {
 			if (context.result.error != null) {
 				return {
 					placeholder: `Unable to load items (${
@@ -507,7 +509,7 @@ export class LaunchpadCommand extends QuickCommand<State> {
 
 			return {
 				placeholder: 'Choose an item to focus on',
-				items: getItems(context.result),
+				items: getItems(context.result, treatAllGroupAsExpanded),
 			};
 		}
 
@@ -516,13 +518,16 @@ export class LaunchpadCommand extends QuickCommand<State> {
 			search?: string,
 		) => {
 			quickpick.busy = true;
-
 			try {
-				await updateContextItems(this.container, context, { force: true, search: search });
-
-				const { items, placeholder } = getItemsAndPlaceholder();
-				quickpick.placeholder = placeholder;
-				quickpick.items = items;
+				await this.updateItemsDebouncer(async cancellationToken => {
+					await updateContextItems(this.container, context, { force: true, search: search });
+					if (cancellationToken.isCancellationRequested) {
+						return;
+					}
+					const { items, placeholder } = getItemsAndPlaceholder(Boolean(search));
+					quickpick.placeholder = placeholder;
+					quickpick.items = items;
+				});
 			} finally {
 				quickpick.busy = false;
 			}
@@ -591,6 +596,7 @@ export class LaunchpadCommand extends QuickCommand<State> {
 							}
 							// We have found an item that matches to the URL.
 							// Now it will be displayed as the found item and we exit this function now without sending any requests to API:
+							this.updateItemsDebouncer.cancel();
 							return true;
 						}
 						// Nothing is found above, so let's perform search in the API:
@@ -599,7 +605,7 @@ export class LaunchpadCommand extends QuickCommand<State> {
 						groupsHidden = true;
 					}
 				}
-
+				this.updateItemsDebouncer.cancel();
 				return true;
 			},
 			onDidClickButton: async (quickpick, button) => {
@@ -1340,7 +1346,7 @@ async function updateContextItems(
 	options?: { force?: boolean; search?: string },
 ) {
 	const result = await container.launchpad.getCategorizedItems(options);
-	if (options?.search != null) {
+	if (options?.search) {
 		context.result = container.launchpad.mergeSearchedCategorizedItems(context.result, result);
 	} else {
 		context.result = result;

src/system/vscode/asyncDebouncer.ts

@@ -0,0 +1,136 @@
+import type { CancellationToken, Disposable } from 'vscode';
+import { CancellationTokenSource } from 'vscode';
+import { CancellationError } from '../../errors';
+import type { Deferrable } from '../function';
+import type { Deferred } from '../promise';
+import { defer } from '../promise';
+
+export interface AsyncTask<T> {
+	(cancelationToken: CancellationToken): T | Promise<T>;
+}
+
+/**
+ * This is similar to `src/system/function.ts: debounce` but it's for async tasks.
+ * The old `debounce` function does not awaits for promises, so it's not suitable for async tasks.
+ *
+ * This function cannot be part of `src/system/function.ts` because it relies on `CancellationTokenSource` from `vscode`.
+ *
+ * Here the debouncer returns a promise that awaits task for completion.
+ * Also we can let tasks know if they are cancelled by passing a cancellation token.
+ *
+ * Despite being able to accept synchronous tasks, we always return a promise here. It's implemeted this way for simplicity.
+ */
+export function createAsyncDebouncer<T>(delay: number): Disposable & Deferrable<(task: AsyncTask<T>) => Promise<T>> {
+	let lastTask: AsyncTask<T> | undefined;
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let curDeferred: Deferred<T> | undefined;
+	let curCancellation: CancellationTokenSource | undefined;
+
+	/**
+	 * Cancels the timer and current execution without cancelling the promise
+	 */
+	function cancelCurrentExecution(): void {
+		if (timer != null) {
+			clearTimeout(timer);
+			timer = undefined;
+		}
+		if (curCancellation != null && !curCancellation.token.isCancellationRequested) {
+			curCancellation.cancel();
+		}
+	}
+
+	function cancel() {
+		cancelCurrentExecution();
+		if (curDeferred?.pending) {
+			curDeferred.cancel(new CancellationError());
+		}
+		lastTask = undefined;
+	}
+
+	function dispose() {
+		cancel();
+		curCancellation?.dispose();
+		curCancellation = undefined;
+	}
+
+	function flush(): Promise<T> | undefined {
+		if (lastTask != null) {
+			cancelCurrentExecution();
+			void invoke();
+		}
+		if (timer != null) {
+			clearTimeout(timer);
+		}
+		return curDeferred?.promise;
+	}
+
+	function pending(): boolean {
+		return curDeferred?.pending ?? false;
+	}
+
+	async function invoke(): Promise<void> {
+		if (curDeferred == null || lastTask == null) {
+			return;
+		}
+		cancelCurrentExecution();
+
+		const task = lastTask;
+		const deferred = curDeferred;
+		lastTask = undefined;
+		const cancellation = (curCancellation = new CancellationTokenSource());
+
+		try {
+			const result = await task(cancellation.token);
+			if (!cancellation.token.isCancellationRequested) {
+				// Default successful line: current task has completed without interruptions by another task
+				if (deferred !== curDeferred && deferred.pending) {
+					deferred.fulfill(result);
+				}
+				if (curDeferred.pending) {
+					curDeferred.fulfill(result);
+				}
+			} else {
+				throw new CancellationError();
+			}
+		} catch (e) {
+			if (cancellation.token.isCancellationRequested) {
+				// The current execution has been cancelled so we don't want to reject the main promise,
+				// because that's expected that it can be fullfilled by the next task.
+				// (If the whole task is cancelled, the main promise will be rejected in the cancel() method)
+				if (curDeferred !== deferred && deferred.pending) {
+					// Unlikely we get here, but if the local `deferred` is different from the main one, then we cancel it to not let the clients hang.
+					deferred.cancel(e);
+				}
+			} else {
+				// The current execution hasn't been cancelled, so just reject the promise with the error
+				if (deferred !== curDeferred && deferred.pending) {
+					deferred.cancel(e);
+				}
+				if (curDeferred?.pending) {
+					curDeferred.cancel(e);
+				}
+			}
+		} finally {
+			cancellation.dispose();
+		}
+	}
+
+	function debounce(this: any, task: AsyncTask<T>): Promise<T> {
+		lastTask = task;
+		cancelCurrentExecution(); // cancelling the timer or current execution without cancelling the promise
+
+		if (!curDeferred?.pending) {
+			curDeferred = defer<T>();
+		}
+
+		timer = setTimeout(invoke, delay);
+
+		return curDeferred.promise;
+	}
+
+	debounce.cancel = cancel;
+	debounce.dispose = dispose;
+	debounce.flush = flush;
+	debounce.pending = pending;
+	return debounce;
+}