fix(wavesurfer): add loading indicator and error handling (#28)

- Add indeterminate linear progress bar that shows on loading and hides on ready/error
- Add error label that displays on WaveSurfer error (filtered to fatal errors only)
- Emit loading/ready/error events from JS to drive Python-side UI state
- Guard serve_wav against non-existent paths early (returns empty string)

Author: NewComer00

locales/app.pot

@@ -478,15 +478,19 @@ msgid ""
 "curve upward; negative values shift it downward"
 msgstr ""
 
-#: utils/ui.py:353
+#: utils/ui.py:350
+msgid "Failed to load audio"
+msgstr ""
+
+#: utils/ui.py:377
 msgid "Play/Pause"
 msgstr ""
 
-#: utils/ui.py:354
+#: utils/ui.py:378
 msgid "Loop region"
 msgstr ""
 
-#: utils/ui.py:355
+#: utils/ui.py:379
 msgid "Zoom"
 msgstr ""
 

locales/en/LC_MESSAGES/app.po

@@ -525,15 +525,19 @@ msgstr ""
 "**Bias** offset added to the expression curve. Positive values shift the "
 "curve upward; negative values shift it downward"
 
-#: utils/ui.py:353
+#: utils/ui.py:350
+msgid "Failed to load audio"
+msgstr "Failed to load audio"
+
+#: utils/ui.py:377
 msgid "Play/Pause"
 msgstr "Play/Pause"
 
-#: utils/ui.py:354
+#: utils/ui.py:378
 msgid "Loop region"
 msgstr "Loop region"
 
-#: utils/ui.py:355
+#: utils/ui.py:379
 msgid "Zoom"
 msgstr "Zoom"
 

locales/zh_CN/LC_MESSAGES/app.po

@@ -495,15 +495,19 @@ msgid ""
 "curve upward; negative values shift it downward"
 msgstr "添加到表情曲线的**偏置**偏移量；正值使曲线上移，负值使曲线下移"
 
-#: utils/ui.py:353
+#: utils/ui.py:350
+msgid "Failed to load audio"
+msgstr "音频加载失败"
+
+#: utils/ui.py:377
 msgid "Play/Pause"
 msgstr "播放/暂停"
 
-#: utils/ui.py:354
+#: utils/ui.py:378
 msgid "Loop region"
 msgstr "选区循环播放"
 
-#: utils/ui.py:355
+#: utils/ui.py:379
 msgid "Zoom"
 msgstr "缩放"
 

utils/ui.py

@@ -327,6 +327,30 @@ def _build(self) -> None:
             waveform_div.classes("w-full rounded-lg overflow-hidden")
             waveform_div.style(f"min-height:{self._height}px; background:var(--ws-bg);")
 
+            self._error = (
+                ui.label('')
+                .classes('w-full text-xs text-red-400')
+            )
+            self._error.set_visibility(False)
+
+            self._loader = (
+                ui.linear_progress(show_value=False)
+                .props('instant-feedback rounded indeterminate')
+                .classes('w-full')
+                .style('height:3px; margin:0; color:#c800c8;')
+            )
+
+        ui.on(f'{iid}-loading', lambda e: (
+            self._error.set_visibility(False),
+            self._loader.set_visibility(True),
+        ))
+        ui.on(f'{iid}-ready', lambda e: self._loader.set_visibility(False))
+        ui.on(f'{iid}-error', lambda e: (
+            self._loader.set_visibility(False),
+            self._error.set_text(e.args.get('message') or _('Failed to load audio')),
+            self._error.set_visibility(True),
+        ))
+
         ws_opts: dict[str, Any] = {
             "container": f"#{iid}_waveform",
             "waveColor": self._wave_color,
@@ -371,6 +395,20 @@ def _build(self) -> None:
 
   window['{iid}'] = {{ ws, regions, loop: {loop_init} }};
 
+  ws.on('loading', (percent) => {{
+    emitEvent('{iid}-loading', {{ percent: percent }});
+  }});
+
+  ws.on('ready', () => {{
+    emitEvent('{iid}-ready', {{}});
+  }});
+
+  ws.on('error', (err) => {{
+    // Filter out non-fatal errors
+    if (ws.getDuration() > 0) return;
+    emitEvent('{iid}-error', {{ message: err?.message || '' }});
+  }});
+
   if ({show_controls_json}) {{
     // Overlay controls: inject a style block + overlay div into the waveform container
     const styleEl = document.createElement('style');
@@ -537,6 +575,9 @@ def serve_wav(wav_path: str) -> str:
     Each unique directory is registered once under /wav/<hashed_dir>.
     WaveSurfer then streams the file normally — no base64 overhead.
     """
+    if not wav_path or not os.path.exists(wav_path):
+        return ''
+
     import hashlib
     directory = os.path.dirname(os.path.abspath(wav_path))
     dir_hash  = hashlib.md5(directory.encode()).hexdigest()[:8]