From 0b6869a4dc239a674ddd1f34e2815f19d599bb6b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 16 Apr 2025 18:06:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20add=20loading=20spinne?=
 =?UTF-8?q?r=20for=20recording=20save=20process?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display loading spinner in side panel during transcript and screen recording
save operations. Provides visual feedback about ongoing processing that was
previously only indicated by title text, making the save status more explicit
to users.
---
 .../features/recording/components/ScreenRecordingSidePanel.tsx  | 2 ++
 .../src/features/recording/components/TranscriptSidePanel.tsx   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
index 4b07006a..7d896594 100644
--- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
@@ -22,6 +22,7 @@ import {
 } from '@/features/notifications'
 import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
+import { Spinner } from '@/primitives/Spinner'
 
 export const ScreenRecordingSidePanel = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -160,6 +161,7 @@ export const ScreenRecordingSidePanel = () => {
               >
                 {t('stopping.body')}
               </Text>
+              <Spinner />
             </>
           ) : (
             <>
diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
index 8ac7e4d7..59633002 100644
--- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
@@ -26,6 +26,7 @@ import {
 } from '@/features/notifications'
 import posthog from 'posthog-js'
 import { useSnapshot } from 'valtio/index'
+import { Spinner } from '@/primitives/Spinner'
 
 export const TranscriptSidePanel = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -193,6 +194,7 @@ export const TranscriptSidePanel = () => {
                   >
                     {t('stopping.body')}
                   </Text>
+                  <Spinner />
                 </>
               ) : (
                 <>