feat: initialize metronome UI with default values before loading server status and use defaults for missing status fields.

reachy_mini_metronome/static/index.html

@@ -509,14 +509,27 @@
 
         // Initialize
         document.addEventListener('DOMContentLoaded', async () => {
+            // Set defaults first
+            const defaultBpm = 120;
+            const defaultTimeSig = 4;
+
+            bpmValue.textContent = defaultBpm;
+            bpmSlider.value = defaultBpm;
+            timeSigValue.textContent = getTimeSigText(defaultTimeSig);
+            updateBeatDots(defaultTimeSig);
+
+            // Then try to get actual status from server
             const status = await getStatus();
             if (status) {
-                bpmValue.textContent = status.bpm;
-                bpmSlider.value = status.bpm;
-                timeSignatureSelect.value = status.time_signature;
-                timeSigValue.textContent = getTimeSigText(status.time_signature);
-                updateBeatDots(status.time_signature);
-                isRunning = status.running;
+                const bpm = status.bpm ?? defaultBpm;
+                const timeSig = status.time_signature ?? defaultTimeSig;
+
+                bpmValue.textContent = bpm;
+                bpmSlider.value = bpm;
+                timeSignatureSelect.value = timeSig;
+                timeSigValue.textContent = getTimeSigText(timeSig);
+                updateBeatDots(timeSig);
+                isRunning = status.running ?? false;
                 updateToggleButton();
                 if (isRunning) {
                     startStatusPolling();