From 5c09a6e146bedc9e8220c5e5a60999fdf8978f55 Mon Sep 17 00:00:00 2001
From: Craigory Coppola <craigorycoppola@gmail.com>
Date: Thu, 19 Dec 2024 17:09:28 -0500
Subject: [PATCH] fix(core): graph spinners should update properly (#29433)

## Current Behavior
Spinners are not updated properly

## Expected Behavior
Spinners are updated properly

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
---
 .../src/project-graph/build-project-graph.ts  | 12 ++++++----
 .../utils/project-configuration-utils.ts      |  6 +++--
 packages/nx/src/utils/delayed-spinner.ts      | 22 +++++++++++--------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/nx/src/project-graph/build-project-graph.ts b/packages/nx/src/project-graph/build-project-graph.ts
index a37283e0e746d..b4f740a8f394c 100644
--- a/packages/nx/src/project-graph/build-project-graph.ts
+++ b/packages/nx/src/project-graph/build-project-graph.ts
@@ -319,13 +319,14 @@ async function updateProjectGraphWithPlugins(
   const inProgressPlugins = new Set<string>();
 
   function updateSpinner() {
-    if (!spinner) {
+    if (!spinner || inProgressPlugins.size === 0) {
       return;
     }
+
     if (inProgressPlugins.size === 1) {
       spinner.setMessage(
         `Creating project graph dependencies with ${
-          inProgressPlugins.keys()[0]
+          inProgressPlugins.values().next().value
         }`
       );
     } else if (process.env.NX_VERBOSE_LOGGING === 'true') {
@@ -439,12 +440,15 @@ export async function applyProjectMetadata(
   const inProgressPlugins = new Set<string>();
 
   function updateSpinner() {
-    if (!spinner) {
+    if (!spinner || inProgressPlugins.size === 0) {
       return;
     }
+
     if (inProgressPlugins.size === 1) {
       spinner.setMessage(
-        `Creating project metadata with ${inProgressPlugins.keys()[0]}`
+        `Creating project metadata with ${
+          inProgressPlugins.values().next().value
+        }`
       );
     } else if (process.env.NX_VERBOSE_LOGGING === 'true') {
       spinner.setMessage(
diff --git a/packages/nx/src/project-graph/utils/project-configuration-utils.ts b/packages/nx/src/project-graph/utils/project-configuration-utils.ts
index f46294ebe928a..320773a1713b2 100644
--- a/packages/nx/src/project-graph/utils/project-configuration-utils.ts
+++ b/packages/nx/src/project-graph/utils/project-configuration-utils.ts
@@ -330,13 +330,15 @@ export async function createProjectConfigurations(
   const inProgressPlugins = new Set<string>();
 
   function updateSpinner() {
-    if (!spinner) {
+    if (!spinner || inProgressPlugins.size === 0) {
       return;
     }
 
     if (inProgressPlugins.size === 1) {
       spinner.setMessage(
-        `Creating project graph nodes with ${inProgressPlugins.keys()[0]}`
+        `Creating project graph nodes with ${
+          inProgressPlugins.values().next().value
+        }`
       );
     } else if (process.env.NX_VERBOSE_LOGGING === 'true') {
       spinner.setMessage(
diff --git a/packages/nx/src/utils/delayed-spinner.ts b/packages/nx/src/utils/delayed-spinner.ts
index 7dd5835f51aed..ba06e684d4cc1 100644
--- a/packages/nx/src/utils/delayed-spinner.ts
+++ b/packages/nx/src/utils/delayed-spinner.ts
@@ -15,8 +15,9 @@ export type DelayedSpinnerOptions = {
 export class DelayedSpinner {
   spinner: ora.Ora;
   timeouts: NodeJS.Timeout[] = [];
-  initial: number = Date.now();
-  lastMessage: string;
+
+  private lastMessage: string;
+  private ready: boolean;
 
   /**
    * Constructs a new {@link DelayedSpinner} instance.
@@ -29,10 +30,11 @@ export class DelayedSpinner {
 
     this.timeouts.push(
       setTimeout(() => {
+        this.ready = true;
         if (!SHOULD_SHOW_SPINNERS) {
-          console.warn(message);
+          console.warn(this.lastMessage);
         } else {
-          this.spinner = ora(message);
+          this.spinner = ora(this.lastMessage).start();
         }
         this.lastMessage = message;
       }, delay).unref()
@@ -46,12 +48,14 @@ export class DelayedSpinner {
    * @returns The {@link DelayedSpinner} instance
    */
   setMessage(message: string) {
-    if (this.spinner && SHOULD_SHOW_SPINNERS) {
-      this.spinner.text = message;
-    } else if (this.lastMessage && this.lastMessage !== message) {
+    if (SHOULD_SHOW_SPINNERS) {
+      if (this.spinner) {
+        this.spinner.text = message;
+      }
+    } else if (this.ready && this.lastMessage && this.lastMessage !== message) {
       console.warn(message);
-      this.lastMessage = message;
     }
+    this.lastMessage = message;
     return this;
   }
 
@@ -91,6 +95,6 @@ function normalizeDelayedSpinnerOpts(
 ) {
   opts ??= {};
   opts.delay ??= 500;
-  opts.ciDelay ??= 10_000;
+  opts.ciDelay ??= 30_000;
   return opts;
 }