From 154531094597bdfd9c73e21dd95322d6f79042ea Mon Sep 17 00:00:00 2001
From: Ender <enderyildirim@outlook.com>
Date: Fri, 24 Oct 2025 02:52:28 +0200
Subject: [PATCH] chore(admin): add minimal network states to Recorder
 (upload/transcribe)

---
 apps/admin/src/features/recorder/Recorder.tsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/admin/src/features/recorder/Recorder.tsx b/apps/admin/src/features/recorder/Recorder.tsx
index 8613486..1aee400 100644
--- a/apps/admin/src/features/recorder/Recorder.tsx
+++ b/apps/admin/src/features/recorder/Recorder.tsx
@@ -11,6 +11,8 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
   const [uploadBucket, setUploadBucket] = useState<string | null>(null);
   const [transcript, setTranscript] = useState<string>('');
   const [error, setError] = useState<string>('');
+  const [isUploading, setIsUploading] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
 
   const requestStream = async (): Promise<MediaStream | null> => {
     try {
@@ -63,6 +65,7 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
       setUploadKey(null);
       setUploadBucket(null);
       setTranscript('');
+      setIsUploading(true);
       if (!audioBlob) {
         setError('No audio to upload');
         return;
@@ -82,6 +85,8 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
       setUploadBucket(data.bucket || null);
     } catch (e: any) {
       setError(e?.message || 'Upload failed');
+    } finally {
+      setIsUploading(false);
     }
   };
 
@@ -89,6 +94,7 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
     try {
       setError('');
       setTranscript('');
+      setIsTranscribing(true);
       if (!uploadKey) {
         setError('Upload audio before transcribing');
         return;
@@ -108,6 +114,8 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
       if (onTranscript) onTranscript(t);
     } catch (e: any) {
       setError(e?.message || 'Transcription failed');
+    } finally {
+      setIsTranscribing(false);
     }
   };
 
@@ -121,12 +129,17 @@ export default function Recorder({ onTranscript }: { onTranscript?: (t: string)
     <Box>
       <Typography variant="h6" sx={{ mb: 1 }}>Audio Recorder</Typography>
       <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
-        <Button variant="contained" disabled={recording} onClick={startRecording}>Start</Button>
-        <Button variant="outlined" disabled={!recording} onClick={stopRecording}>Stop</Button>
-        <Button variant="text" disabled={!audioBlob} onClick={uploadAudio}>Upload</Button>
-        <Button variant="text" disabled={!uploadKey} onClick={transcribe}>Transcribe</Button>
+        <Button variant="contained" disabled={recording || isUploading || isTranscribing} onClick={startRecording}>Start</Button>
+        <Button variant="outlined" disabled={!recording || isUploading || isTranscribing} onClick={stopRecording}>Stop</Button>
+        <Button variant="text" disabled={!audioBlob || isUploading || isTranscribing} onClick={uploadAudio}>Upload</Button>
+        <Button variant="text" disabled={!uploadKey || isUploading || isTranscribing} onClick={transcribe}>Transcribe</Button>
       </Stack>
       {error && <Typography color="error" sx={{ mb: 2 }}>{error}</Typography>}
+      {(isUploading || isTranscribing) && (
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          {isUploading ? 'Uploading…' : 'Transcribing…'}
+        </Typography>
+      )}
       {audioUrl && (
         <Box>
           <audio controls src={audioUrl} />