feat: add build loading awareness in the terminal(#1117) (#1118)

* feat: add build loading awareness in the terminal

- Import loading awareness animation for build process
- Start loading animation when build and rebuild starts
- Stop loading animation when build succeeds or fails

* refactor: improve loading animation code structure

- Move state management to a single state object
- Extract LOADING_TEXT to constants
- Add consistent bracket style

---------

Co-authored-by: L <[email protected]>

cli/plasmo/src/commands/dev.ts

@@ -9,6 +9,7 @@ import { getBundleConfig } from "~features/extension-devtools/get-bundle-config"
 import { createProjectWatcher } from "~features/extension-devtools/project-watcher"
 import { checkNewVersion } from "~features/framework-update/version-tracker"
 import { createParcelBuilder } from "~features/helpers/create-parcel-bundler"
+import { startLoading, stopLoading } from "~features/helpers/loading-animation"
 import { printHeader } from "~features/helpers/print"
 import { createManifest } from "~features/manifest-factory/create-manifest"
 
@@ -62,20 +63,29 @@ async function dev() {
 
   const bundlerWatcher = await bundler.watch(async (err, event) => {
     if (err) {
+      stopLoading()
       throw err
     }
 
     if (event === undefined) {
       return
     }
 
+    if (event.type === "buildStart") {
+      startLoading()
+      return
+    }
+
     if (event.type === "buildSuccess") {
+      stopLoading()
       sLog(`Extension re-packaged in ${chalk.bold(event.buildTime)}ms! 🚀`)
-
       await plasmoManifest.postBuild()
-
       buildWatcher.broadcast(BuildSocketEvent.BuildReady)
-    } else if (event.type === "buildFailure") {
+      return
+    }
+
+    if (event.type === "buildFailure") {
+      stopLoading()
       if (!isVerbose()) {
         eLog(
           chalk.redBright(

cli/plasmo/src/features/helpers/loading-animation.ts

@@ -0,0 +1,32 @@
+const LOADING_TEXT = "🔄 Building"
+const state = {
+  loadingInterval: null as NodeJS.Timeout | null,
+  isLoading: false,
+  dotCount: 0
+}
+
+export const startLoading = () => {
+  if (state.isLoading) {
+    return
+  }
+  state.isLoading = true
+  process.stdout.write(LOADING_TEXT)
+  state.loadingInterval = setInterval(() => {
+    state.dotCount = (state.dotCount + 1) % 4
+    let dotString = state.dotCount === 0 ? "   " : ".".repeat(state.dotCount)
+    process.stdout.write(`\r${LOADING_TEXT}${dotString}`)
+  }, 400)
+}
+
+export const stopLoading = () => {
+  if (!state.isLoading) {
+    return
+  }
+  state.isLoading = false
+  if (state.loadingInterval) {
+    clearInterval(state.loadingInterval)
+    state.loadingInterval = null
+  }
+  // Clear the loading text
+  process.stdout.write("\r" + " ".repeat(20) + "\r")
+}

core/parcel-core/src/index.ts

@@ -161,7 +161,7 @@ export class Parcel {
       throw new BuildError(result.diagnostics)
     }
 
-    return result
+    return result as BuildSuccessEvent
   }
 
   async _end(): Promise<void> {
@@ -259,6 +259,11 @@ export class Parcel {
       if (options.shouldProfile) {
         await this.startProfiling()
       }
+
+      this.#watchEvents.emit({
+        buildEvent: { type: "buildStart" }
+      })
+
       this.#reporterRunner.report({
         type: "buildStart"
       })