diff --git a/cli/plasmo/src/commands/dev.ts b/cli/plasmo/src/commands/dev.ts
index 9270202f5..9bc361629 100644
--- a/cli/plasmo/src/commands/dev.ts
+++ b/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,6 +63,7 @@ async function dev() {
 
   const bundlerWatcher = await bundler.watch(async (err, event) => {
     if (err) {
+      stopLoading()
       throw err
     }
 
@@ -69,13 +71,21 @@ async function dev() {
       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(
diff --git a/cli/plasmo/src/features/helpers/loading-animation.ts b/cli/plasmo/src/features/helpers/loading-animation.ts
new file mode 100644
index 000000000..7fc6df366
--- /dev/null
+++ b/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")
+}
diff --git a/core/parcel-core/src/index.ts b/core/parcel-core/src/index.ts
index 6200125b7..51d606b0b 100644
--- a/core/parcel-core/src/index.ts
+++ b/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"
       })