From d92adb7435b0e49133f6438477b275e8759e9f08 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 16 Apr 2025 18:57:55 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20differentiate=20loadin?=
 =?UTF-8?q?g=20and=20active=20recording=20states=20in=20toast?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add visual distinction between recording initialization and active recording
phases in status toast. Clearly communicates to users when recording becomes
active versus when it's still in the loading/preparation phase.
---
 .../recording/components/RecordingStateToast.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/features/recording/components/RecordingStateToast.tsx b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
index c9b2d0c3..9b87d5dc 100644
--- a/src/frontend/src/features/recording/components/RecordingStateToast.tsx
+++ b/src/frontend/src/features/recording/components/RecordingStateToast.tsx
@@ -9,6 +9,7 @@ import { RemoteParticipant, RoomEvent } from 'livekit-client'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
 import { NotificationType } from '@/features/notifications/NotificationType'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
+import { RiRecordCircleLine } from '@remixicon/react'
 
 export const RecordingStateToast = () => {
   const { t } = useTranslation('rooms', {
@@ -98,6 +99,8 @@ export const RecordingStateToast = () => {
 
   if (!key) return
 
+  const isStarted = key?.includes('started')
+
   return (
     <div
       className={css({
@@ -115,7 +118,16 @@ export const RecordingStateToast = () => {
         gap: '0.5rem',
       })}
     >
-      <Spinner size={20} variant="dark" />
+      {isStarted ? (
+        <RiRecordCircleLine
+          size={20}
+          className={css({
+            animation: 'pulse_background 1s infinite',
+          })}
+        />
+      ) : (
+        <Spinner size={20} variant="dark" />
+      )}
       <Text
         variant={'sm'}
         className={css({