studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚸(frontend) show spinner immediately on recording request initiation

Browse Source 
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.
This commit is contained in:
lebaudantoine
2025-04-25 15:58:48 +02:00
committed by aleb_the_flash
parent bcb004ab4b
commit cb00347be6
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx
View File

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

11
src/frontend/src/features/recording/components/TranscriptSidePanel.tsx
View File

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