Improve recording UI/UX

app.py

@@ -16,6 +16,7 @@ def main(page: ft.Page):
         on_state_changed=lambda e: update_recording_status(e.data)
     )
     recording_status = ft.Text()
+    loading_animation = ft.ProgressRing(visible=False)
     audio_player = None  # Initialize audio_player as None
 
     page.overlay.append(audio_recorder)  # Only add audio_recorder to overlay initially
@@ -26,15 +27,19 @@ def main(page: ft.Page):
 
     def start_recording(e):
         record_button.disabled = True
-        stop_button.disabled = False
+        stop_button.disabled = True
         play_button.disabled = True
+        loading_animation.visible = True
+        recording_status.value = "Preparing to record..."
         page.update()
 
         nonlocal temp_recording_file
         temp_recording_file = tempfile.NamedTemporaryFile(delete=False, suffix=".wav")
         logger.info(f"Starting recording to {temp_recording_file.name}")
-        audio_recorder.start_recording(temp_recording_file.name, wait_timeout=0.1)
-        page.update()
+        
+        audio_recorder.start_recording(temp_recording_file.name, wait_timeout=2)
+        
+        # The actual recording start will be handled in update_recording_status
 
     def stop_recording(e):
         record_button.disabled = False
@@ -61,7 +66,12 @@ def main(page: ft.Page):
             audio_player.play()
 
     def update_recording_status(status):
-        recording_status.value = f"Recording status: {status}"
+        if status == "recording":
+            stop_button.disabled = False
+            loading_animation.visible = False
+            recording_status.value = "Recording in progress..."
+        else:
+            recording_status.value = f"Recording status: {status}"
         page.update()
 
     record_button = ft.ElevatedButton("Start Recording", on_click=start_recording)
@@ -84,7 +94,7 @@ def main(page: ft.Page):
 
     page.add(
         ft.Text("Simple Audio Recorder", size=24),
-        ft.Row([record_button, stop_button, play_button]),
+        ft.Row([record_button, stop_button, play_button, loading_animation]),
         recording_status,
         ft.ElevatedButton("List Devices", on_click=handle_list_devices),
         ft.ElevatedButton("Test AudioEncodings", on_click=handle_audio_encoding_test),