feat: timer indicator for spinner (#230)

Co-authored-by: Nate Moore <[email protected]>

.changeset/bright-chefs-double.md

@@ -0,0 +1,13 @@
+---
+'@clack/prompts': minor
+---
+
+Adds a new `indicator` option to `spinner`, which supports the original `"dots"` loading animation or a new `"timer"` loading animation.
+
+```ts
+import * as p from '@clack/prompts';
+
+const spin = p.spinner({ indicator: 'timer' });
+spin.start('Loading');
+await sleep(3000);
+spin.stop('Loaded');

examples/basic/package.json

@@ -12,7 +12,8 @@
     "start": "jiti ./index.ts",
     "stream": "jiti ./stream.ts",
     "spinner": "jiti ./spinner.ts",
-    "spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts"
+    "spinner-ci": "npx cross-env CI=\"true\" jiti ./spinner-ci.ts",
+    "spinner-timer": "jiti ./spinner-timer.ts"
   },
   "devDependencies": {
     "jiti": "^1.17.0"

examples/basic/spinner-timer.ts

@@ -0,0 +1,26 @@
+import * as p from '@clack/prompts';
+
+p.intro('spinner start...');
+
+async function main() {
+	const spin = p.spinner({ indicator: 'timer' });
+
+	spin.start('First spinner');
+
+	await sleep(3_000);
+
+	spin.stop('Done first spinner');
+
+	spin.start('Second spinner');
+	await sleep(5_000);
+
+	spin.stop('Done second spinner');
+
+	p.outro('spinner stop.');
+}
+
+function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+main();

packages/prompts/src/index.ts

@@ -720,7 +720,11 @@ export const stream = {
 	},
 };
 
-export const spinner = () => {
+export interface SpinnerOptions {
+	indicator?: 'dots' | 'timer';
+}
+
+export const spinner = ({ indicator = 'dots' }: SpinnerOptions = {}) => {
 	const frames = unicode ? ['◒', '◐', '◓', '◑'] : ['•', 'o', 'O', '0'];
 	const delay = unicode ? 80 : 120;
 	const isCI = process.env.CI === 'true';
@@ -730,6 +734,7 @@ export const spinner = () => {
 	let isSpinnerActive = false;
 	let _message = '';
 	let _prevMessage: string | undefined = undefined;
+	let _origin: number = performance.now();
 
 	const handleExit = (code: number) => {
 		const msg = code > 1 ? 'Something went wrong' : 'Canceled';
@@ -770,13 +775,21 @@ export const spinner = () => {
 		return msg.replace(/\.+$/, '');
 	};
 
+	const formatTimer = (origin: number): string => {
+		const duration = (performance.now() - origin) / 1000;
+		const min = Math.floor(duration / 60);
+		const secs = Math.floor(duration % 60);
+		return min > 0 ? `[${min}m ${secs}s]` : `[${secs}s]`;
+	};
+
 	const start = (msg = ''): void => {
 		isSpinnerActive = true;
 		unblock = block();
 		_message = parseMessage(msg);
+		_origin = performance.now();
 		process.stdout.write(`${color.gray(S_BAR)}\n`);
 		let frameIndex = 0;
-		let dotsTimer = 0;
+		let indicatorTimer = 0;
 		registerHooks();
 		loop = setInterval(() => {
 			if (isCI && _message === _prevMessage) {
@@ -785,10 +798,18 @@ export const spinner = () => {
 			clearPrevMessage();
 			_prevMessage = _message;
 			const frame = color.magenta(frames[frameIndex]);
-			const loadingDots = isCI ? '...' : '.'.repeat(Math.floor(dotsTimer)).slice(0, 3);
-			process.stdout.write(`${frame}  ${_message}${loadingDots}`);
+
+			if (isCI) {
+				process.stdout.write(`${frame}  ${_message}...`);
+			} else if (indicator === 'timer') {
+				process.stdout.write(`${frame}  ${_message} ${formatTimer(_origin)}`);
+			} else {
+				const loadingDots = '.'.repeat(Math.floor(indicatorTimer)).slice(0, 3);
+				process.stdout.write(`${frame}  ${_message}${loadingDots}`);
+			}
+
 			frameIndex = frameIndex + 1 < frames.length ? frameIndex + 1 : 0;
-			dotsTimer = dotsTimer < frames.length ? dotsTimer + 0.125 : 0;
+			indicatorTimer = indicatorTimer < frames.length ? indicatorTimer + 0.125 : 0;
 		}, delay);
 	};
 
@@ -803,7 +824,11 @@ export const spinner = () => {
 					? color.red(S_STEP_CANCEL)
 					: color.red(S_STEP_ERROR);
 		_message = parseMessage(msg ?? _message);
-		process.stdout.write(`${step}  ${_message}\n`);
+		if (indicator === 'timer') {
+			process.stdout.write(`${step}  ${_message} ${formatTimer(_origin)}\n`);
+		} else {
+			process.stdout.write(`${step}  ${_message}\n`);
+		}
 		clearHooks();
 		unblock();
 	};