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')}