adds validate state, triggered after 300ms

Author: natemoo-re

examples/basic/index.ts

@@ -15,7 +15,8 @@ async function main() {
 				p.text({
 					message: 'Where should we create your project?',
 					placeholder: './sparkling-solid',
-					validate: (value) => {
+					validate: async (value) => {
+						await setTimeout(299);
 						if (!value) return 'Please enter a path.';
 						if (value[0] !== '.') return 'Please enter a relative path.';
 					},

packages/core/src/prompts/prompt.ts

@@ -4,6 +4,7 @@ import { stdin, stdout } from 'node:process';
 import readline from 'node:readline';
 import { Readable, Writable } from 'node:stream';
 import { WriteStream } from 'node:tty';
+import { setTimeout } from 'node:timers/promises';
 import { cursor, erase } from 'sisteransi';
 import wrap from 'wrap-ansi';
 
@@ -52,7 +53,7 @@ export interface PromptOptions<Self extends Prompt> {
 	debug?: boolean;
 }
 
-export type State = 'initial' | 'active' | 'cancel' | 'submit' | 'error';
+export type State = 'initial' | 'active' | 'cancel' | 'validate' | 'submit' | 'error';
 
 export default class Prompt {
 	protected input: Readable;
@@ -176,7 +177,17 @@ export default class Prompt {
 
 		if (key?.name === 'return') {
 			if (this.opts.validate) {
-				const problem = await this.opts.validate(this.value);
+				this.state = 'validate';
+				let problem = this.opts.validate(this.value);
+				// Only trigger validation state after 300ms.
+				// If problem resolves first, render will be cancelled.
+				await Promise.race([
+					problem,
+					setTimeout(300).then(() => {
+						this.render();
+					}),
+				]);
+				problem = await problem;
 				if (problem) {
 					this.error = problem;
 					this.state = 'error';

packages/prompts/src/index.ts

@@ -20,6 +20,7 @@ export { isCancel } from '@clack/core';
 const unicode = isUnicodeSupported();
 const s = (c: string, fallback: string) => (unicode ? c : fallback);
 const S_STEP_ACTIVE = s('◆', '*');
+const S_STEP_VALIDATE = S_STEP_ACTIVE;
 const S_STEP_CANCEL = s('■', 'x');
 const S_STEP_ERROR = s('▲', 'x');
 const S_STEP_SUBMIT = s('◇', 'o');
@@ -50,6 +51,8 @@ const symbol = (state: State) => {
 		case 'initial':
 		case 'active':
 			return color.cyan(S_STEP_ACTIVE);
+		case 'validate':
+			return color.cyan(S_STEP_VALIDATE);
 		case 'cancel':
 			return color.red(S_STEP_CANCEL);
 		case 'error':
@@ -80,6 +83,8 @@ export const text = (opts: TextOptions) => {
 			const value = !this.value ? placeholder : this.valueWithCursor;
 
 			switch (this.state) {
+				case 'validate':
+					return `${title}${color.cyan(S_BAR)}  ${value}\n${color.cyan(S_BAR_END)}  ${color.dim('Validating...')}\n`;
 				case 'error':
 					return `${title.trim()}\n${color.yellow(S_BAR)}  ${value}\n${color.yellow(
 						S_BAR_END