From cb00347be6073818727d8b4a34fed6b4456a0a38 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 25 Apr 2025 15:58:48 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20show=20spinner=20immed?=
 =?UTF-8?q?iately=20on=20recording=20request=20initiation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Display loading spinner when recording request is sent instead of waiting
for API confirmation. Provides immediate feedback during slow server
responses to improve perceived responsiveness.
---
 .../recording/components/ScreenRecordingSidePanel.tsx | 10 ++++++----
 .../recording/components/TranscriptSidePanel.tsx      | 11 +++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
index 4749657e..cd4f962a 100644
--- a/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
@@ -33,8 +33,10 @@ export const ScreenRecordingSidePanel = () => {
 
   const roomId = useRoomId()
 
-  const { mutateAsync: startRecordingRoom } = useStartRecording()
-  const { mutateAsync: stopRecordingRoom } = useStopRecording()
+  const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } =
+    useStartRecording()
+  const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } =
+    useStopRecording()
 
   const statuses = useMemo(() => {
     return {
@@ -145,7 +147,7 @@ export const ScreenRecordingSidePanel = () => {
         </>
       ) : (
         <>
-          {statuses.isStopping ? (
+          {statuses.isStopping || isPendingToStop ? (
             <>
               <H lvl={3} margin={false}>
                 {t('stopping.heading')}
@@ -193,7 +195,7 @@ export const ScreenRecordingSidePanel = () => {
                 size="sm"
                 variant="tertiary"
               >
-                {statuses.isStarting ? (
+                {statuses.isStarting || isPendingToStart ? (
                   <>
                     <Spinner size={20} />
                     {t('start.loading')}
diff --git a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
index 3e0582fd..6f187648 100644
--- a/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
+++ b/src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
@@ -42,8 +42,11 @@ export const TranscriptSidePanel = () => {
   )
   const roomId = useRoomId()
 
-  const { mutateAsync: startRecordingRoom } = useStartRecording()
-  const { mutateAsync: stopRecordingRoom } = useStopRecording()
+  const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } =
+    useStartRecording()
+
+  const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } =
+    useStopRecording()
 
   const statuses = useMemo(() => {
     return {
@@ -177,7 +180,7 @@ export const TranscriptSidePanel = () => {
             </>
           ) : (
             <>
-              {statuses.isStopping ? (
+              {statuses.isStopping || isPendingToStop ? (
                 <>
                   <H lvl={3} margin={false}>
                     {t('stopping.heading')}
@@ -225,7 +228,7 @@ export const TranscriptSidePanel = () => {
                     size="sm"
                     variant="tertiary"
                   >
-                    {statuses.isStarting ? (
+                    {statuses.isStarting || isPendingToStart ? (
                       <>
                         <Spinner size={20} />
                         {t('start.loading')}