fix: debounce notebook cell outputs and status to prevent flash on re-execution

Author: nstrayer

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/CodeCellStatusFooter.tsx

@@ -12,7 +12,7 @@ import { useEffect, useRef, useState } from 'react';
 // Other dependencies.
 import { localize } from '../../../../../nls.js';
 import * as DOM from '../../../../../base/browser/dom.js';
-import { useObservedValue } from '../useObservedValue.js';
+import { useObservedValue, useDebouncedObservedValue } from '../useObservedValue.js';
 import { PositronNotebookCodeCell } from '../PositronNotebookCells/PositronNotebookCodeCell.js';
 import { formatCellDuration, formatTimestamp, getRelativeTime, isMoreThanOneHourAgo } from './cellExecutionUtils.js';
 import { Icon } from '../../../../../platform/positronActionBar/browser/components/icon.js';
@@ -23,17 +23,20 @@ interface CodeCellStatusFooterProps {
 	hasError: boolean;
 }
 
+const isRunningOrPending = (s: string) => s === 'running' || s === 'pending';
+
 /**
  * Footer component that displays cell execution status information between
  * the editor and outputs sections. Shows execution state, duration, and timestamp.
  */
 export function CodeCellStatusFooter({ cell, hasError }: CodeCellStatusFooterProps) {
-	// Observe cell execution state
-	const executionStatus = useObservedValue(cell.executionStatus);
+	// Debounce "clearing" transitions to prevent visual flash during fast re-executions.
+	// Only delay transitions to running/pending/undefined; new values propagate immediately.
+	const executionStatus = useDebouncedObservedValue(cell.executionStatus, isRunningOrPending);
 	const executionOrder = useObservedValue(cell.lastExecutionOrder);
-	const duration = useObservedValue(cell.lastExecutionDuration);
-	const lastRunEndTime = useObservedValue(cell.lastRunEndTime);
-	const lastRunSuccess = useObservedValue(cell.lastRunSuccess);
+	const duration = useDebouncedObservedValue(cell.lastExecutionDuration);
+	const lastRunEndTime = useDebouncedObservedValue(cell.lastRunEndTime);
+	const lastRunSuccess = useDebouncedObservedValue(cell.lastRunSuccess);
 
 	/**
 	 * `lastRunEndTime` doesn't change after execution completes, which means the

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/NotebookCodeCell.tsx

@@ -12,7 +12,7 @@ import React, { useMemo } from 'react';
 // Other dependencies.
 import { NotebookCellOutputs, ParsedTextOutput } from '../PositronNotebookCells/IPositronNotebookCell.js';
 import { isParsedTextOutput } from '../getOutputContents.js';
-import { useObservedValue } from '../useObservedValue.js';
+import { useObservedValue, useDebouncedObservedValue } from '../useObservedValue.js';
 import { CellEditorMonacoWidget } from './CellEditorMonacoWidget.js';
 import { localize } from '../../../../../nls.js';
 import { positronClassNames } from '../../../../../base/common/positronUtilities.js';
@@ -209,8 +209,11 @@ const CellOutputsSection = React.memo(function CellOutputsSection({ cell, output
 	return prevProps.outputs === nextProps.outputs;
 });
 
+const isEmptyArray = (a: unknown[]) => a.length === 0;
+
 export const NotebookCodeCell = React.memo(function NotebookCodeCell({ cell }: { cell: PositronNotebookCodeCell }) {
-	const outputContents = useObservedValue(cell.outputs);
+	// Debounce only transitions to empty so re-execution doesn't flash.
+	const outputContents = useDebouncedObservedValue(cell.outputs, isEmptyArray);
 	const hasError = outputContents.some(o => o.parsed.type === 'error');
 
 	return (

src/vs/workbench/contrib/positronNotebook/browser/useObservedValue.tsx

@@ -7,7 +7,8 @@
 import React from 'react';
 
 // Other dependencies.
-import { IObservable, runOnChange } from '../../../../base/common/observable.js';
+import { IObservable, debouncedObservable, runOnChange } from '../../../../base/common/observable.js';
+import { isUndefinedOrNull } from '../../../../base/common/types.js';
 
 /**
  * Automatically updates the component when the observable changes.
@@ -39,3 +40,38 @@ export function useObservedValue<T>(observable: IObservable<T> | undefined, defa
 
 	return value;
 }
+
+/**
+ * Like {@link useObservedValue}, but debounces value transitions where the
+ * provided `shouldDebounce` predicate returns true. Non-debounced transitions
+ * propagate immediately.
+ *
+ * Useful for suppressing transient UI flashes during cell re-execution without
+ * delaying meaningful updates.
+ *
+ * @param observable The observable to subscribe to.
+ * @param shouldDebounce Predicate receiving the new value. Return `true` to
+ *   delay propagation by the specified `delayMs`, `false` to propagate
+ *   immediately. Defaults to nullish check which covers `undefined` and `null`
+ *   but not valid falsy values like `0` or `false`. Note that this is used in
+ *   the dependency array of the `useMemo` call that creates the debounced
+ *   observable, so it should be memoized if it is not a stable reference or
+ *   otherwise the memo will be invalidated on every render, defeating the
+ *   purpose of debouncing.
+ * @param delayMs Optional debounce delay in milliseconds. Defaults to 150ms.
+ */
+
+export function useDebouncedObservedValue<T>(
+	observable: IObservable<T>,
+	shouldDebounce: (next: T) => boolean = isUndefinedOrNull,
+	delayMs: number = 150,
+): T {
+	const debounced = React.useMemo(
+		() => debouncedObservable(observable, (_prev, next) => shouldDebounce(next) ? delayMs : 0),
+		// We dont need to worry about the delayMs causing invalidation because
+		// pure number types are compared by value not reference in the
+		// dependency arrays of hooks.
+		[observable, shouldDebounce, delayMs]
+	);
+	return useObservedValue(debounced);
+}