feat: Add a transcribing mode to the overlay visualizer with a loading animation.

ciro-maciel · ciro-maciel · commit 1c208c7cc133 · 2025-12-27T05:46:01.000-03:00
diff --git a/application/src/main.js b/application/src/main.js
@@ -108,7 +108,6 @@ function loadConfig() {
   };
 
   console.log("MAIN: Store Path:", store.path);
-  console.log("MAIN: Loaded Config from Store:", config);
   log.info("Loaded Config:", config);
   return config;
 }
@@ -408,6 +407,7 @@ function startRecording() {
   isRecording = true;
   updateTrayIcon(true);
   showOverlay();
+  setOverlayMode("recording");
 
   // Tell renderer to start recording
   mainWindow?.webContents.send("start-recording");
@@ -419,7 +419,8 @@ function stopRecording() {
   // console.log("⏹️ Recording stopped.");
   isRecording = false;
   updateTrayIcon(false);
-  hideOverlay();
+  // Do NOT hide overlay yet - switch to transcribing mode
+  setOverlayMode("transcribing");
 
   // Tell renderer to stop recording and send audio
   mainWindow?.webContents.send("stop-recording");
@@ -507,6 +508,12 @@ function hideOverlay() {
   }
 }
 
+function setOverlayMode(mode) {
+  if (overlayWindow && !overlayWindow.isDestroyed()) {
+    overlayWindow.webContents.send("set-mode", mode);
+  }
+}
+
 // ============================================================================
 // TRANSCRIPTION (whisper.cpp)
 // ============================================================================
@@ -772,6 +779,9 @@ async function handleRecordingComplete() {
     });
   }
 
+  // Hide overlay after everything is done
+  hideOverlay();
+
   setTimeout(() => {
     mainWindow?.webContents.send("status", {
       message: `Ready! Press ${CONFIG.hotkey} to start`,
diff --git a/application/src/overlay-preload.js b/application/src/overlay-preload.js
@@ -1,12 +1,10 @@
-/**
- * Preload script for the overlay visualizer window
- * Exposes only the audio level callback API
- */
-
 const { contextBridge, ipcRenderer } = require("electron");
 
 contextBridge.exposeInMainWorld("overlayApi", {
   onAudioLevel: (callback) => {
     ipcRenderer.on("audio-level", (event, level) => callback(level));
   },
+  onSetMode: (callback) => {
+    ipcRenderer.on("set-mode", (event, mode) => callback(mode));
+  },
 });
diff --git a/application/src/overlay-visualizer.html b/application/src/overlay-visualizer.html
@@ -89,10 +89,33 @@
       0%, 100% { opacity: 1; transform: scale(1); }
       50% { opacity: 0.6; transform: scale(0.85); }
     }
+    /* Loading dots */
+    .loading-container {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      background: var(--text-secondary);
+      border-radius: 50%;
+      animation: bounce 1.4s infinite ease-in-out both;
+    }
+
+    .dot:nth-child(1) { animation-delay: -0.32s; }
+    .dot:nth-child(2) { animation-delay: -0.16s; }
+
+    @keyframes bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1); }
+    }
   </style>
 </head>
 <body>
-  <div class="visualizer-container">
+  <div class="visualizer-container" id="visualizer">
     <div class="rec-dot"></div>
     <div class="bar idle" id="bar1"></div>
     <div class="bar idle" id="bar2"></div>
@@ -101,6 +124,12 @@
     <div class="bar idle" id="bar5"></div>
   </div>
 
+  <div class="visualizer-container loading-container" id="loading">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+
   <script>
     const bars = [
       document.getElementById('bar1'),
@@ -109,6 +138,8 @@
       document.getElementById('bar4'),
       document.getElementById('bar5')
     ];
+    const visualizerEl = document.getElementById('visualizer');
+    const loadingEl = document.getElementById('loading');
 
     // Color palette matching the app
     const colors = {
@@ -118,6 +149,18 @@
       peak: '#ef4444'      // recording (red)
     };
 
+    // Mode switching
+    window.overlayApi.onSetMode((mode) => {
+       if (mode === 'transcribing') {
+         visualizerEl.style.display = 'none';
+         loadingEl.style.display = 'flex';
+       } else {
+         // Default to recording
+         visualizerEl.style.display = 'flex';
+         loadingEl.style.display = 'none';
+       }
+    });
+
     // Listen for audio levels from main process
     window.overlayApi.onAudioLevel((level) => {
       // level is 0.0 to 1.0
