🚸(frontend) add loading spinner to recording start button

Add visual spinner indication to start button when initializing transcript
or screen recording. Provides clear feedback that recording process is
starting rather than leaving users uncertain about system status.

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -40,6 +40,8 @@ export const ScreenRecordingSidePanel = () => {
     return {
       isAnotherModeStarted:
         recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED,
+      isStarting:
+        recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTING,
       isStarted:
         recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED,
       isStopping:
@@ -191,7 +193,14 @@ export const ScreenRecordingSidePanel = () => {
                 size="sm"
                 variant="tertiary"
               >
-                {t('start.button')}
+                {statuses.isStarting ? (
+                  <>
+                    <Spinner size={20} />
+                    {t('start.loading')}
+                  </>
+                ) : (
+                  t('start.button')
+                )}
               </Button>
             </>
           )}

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -49,6 +49,7 @@ export const TranscriptSidePanel = () => {
     return {
       isAnotherModeStarted:
         recordingSnap.status == RecordingStatus.SCREEN_RECORDING_STARTED,
+      isStarting: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTING,
       isStarted: recordingSnap.status == RecordingStatus.TRANSCRIPT_STARTED,
       isStopping: recordingSnap.status == RecordingStatus.TRANSCRIPT_STOPPING,
     }
@@ -224,7 +225,14 @@ export const TranscriptSidePanel = () => {
                     size="sm"
                     variant="tertiary"
                   >
-                    {t('start.button')}
+                    {statuses.isStarting ? (
+                      <>
+                        <Spinner size={20} />
+                        {t('start.loading')}
+                      </>
+                    ) : (
+                      t('start.button')
+                    )}
                   </Button>
                 </>
               )}

src/frontend/src/locales/en/rooms.json

@@ -205,6 +205,7 @@
       "heading": "Transcribe this call",
       "body": "Automatically transcribe this call and receive the summary in Docs.",
       "button": "Start transcription",
+      "loading": "Transcription starting",
       "linkMore": "Learn more"
     },
     "stop": {
@@ -227,6 +228,7 @@
       "heading": "Record this call",
       "body": "Record this call to watch it later and receive the video recording by email.",
       "button": "Start recording",
+      "loading": "Recording starting",
       "linkMore": "Learn more"
     },
     "stopping": {

src/frontend/src/locales/fr/rooms.json

@@ -205,6 +205,7 @@
       "heading": "Transcrire cet appel",
       "body": "Transcrivez cet appel automatiquement et recevez le compte rendu dans Docs.",
       "button": "Démarrer la transcription",
+      "loading": "Démarrage de la transcription",
       "linkMore": "En savoir plus"
     },
     "stop": {
@@ -227,6 +228,7 @@
       "heading": "Enregistrer cet appel",
       "body": "Enregistrez cet appel pour plus tard et recevez l'enregistrement vidéo par mail.",
       "button": "Démarrer l'enregistrement",
+      "loading": "Démarrage de l'enregistrement",
       "linkMore": "En savoir plus"
     },
     "stopping": {

src/frontend/src/locales/nl/rooms.json

@@ -205,6 +205,7 @@
       "heading": "Transcribeer dit gesprek",
       "body": "Transcribeer dit gesprek automatisch en ontvang het verslag in Docs.",
       "button": "Transcriptie starten",
+      "loading": "Transcriptie begint",
       "linkMore": "Meer informatie"
     },
     "stop": {
@@ -227,6 +228,7 @@
       "heading": "Dit gesprek opnemen",
       "body": "Neem dit gesprek op om het later terug te kijken. Je ontvangt de video-opname per e-mail.",
       "button": "Opname starten",
+      "loading": "Opname gestarten",
       "linkMore": "Meer informatie"
     },
     "stopping": {