From 5c54176456e097cffe8efa47dfcdbd89db94b134 Mon Sep 17 00:00:00 2001
From: Durgesh <84910181+Durgesh-babu@users.noreply.github.com>
Date: Sun, 1 Feb 2026 19:33:10 +0530
Subject: [PATCH 1/4] feat(fuselage): implement loading state in AudioPlayer
 with spinner animation

---
 .../AudioPlayer/AudioPlayer.styles.scss       | 16 ++++++++++++
 .../components/AudioPlayer/AudioPlayer.tsx    | 25 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 packages/fuselage/src/components/AudioPlayer/AudioPlayer.styles.scss

diff --git a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.styles.scss b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.styles.scss
new file mode 100644
index 0000000000..436ba3c8df
--- /dev/null
+++ b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.styles.scss
@@ -0,0 +1,16 @@
+.rcx-audio-player {
+  &--loading {
+    .rcx-icon--name-loading {
+      animation: spin-animation 0.8s linear infinite;
+    }
+  }
+}
+
+@keyframes spin-animation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
index 61b44839f8..1028e1aefe 100644
--- a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
@@ -4,6 +4,7 @@ import { useState, useRef, forwardRef } from 'react';
 
 import { Box, Button, IconButton, Margins } from '../..';
 import { Slider } from '../Slider';
+import './AudioPlayer.styles.scss';
 
 const getMaskTime = (durationTime: number) =>
   new Date(durationTime * 1000)
@@ -73,6 +74,16 @@ export type AudioPlayerProps = {
   trackProps?: TrackHTMLAttributes<HTMLTrackElement>;
 };
 
+const getIcon = (isLoading: boolean, isPlaying: boolean) => {
+  if (isLoading) {
+    return 'loading';
+  }
+  if (isPlaying) {
+    return 'pause-shape-filled';
+  }
+  return 'play-shape-filled';
+};
+
 const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
   (
     {
@@ -93,6 +104,7 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
   ) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const refs = useMergedRefs(ref, audioRef);
+    const [isLoading, setIsLoading] = useState(true);
     const [isPlaying, setIsPlaying] = useState(false);
     const [currentTime, setCurrentTime] = useState(0);
     const [durationTime, setDurationTime] = useState(0);
@@ -128,6 +140,8 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
 
     return (
       <Box
+        rcx-audio-player
+        rcx-audio-player--loading={isLoading}
         borderWidth='default'
         bg='tint'
         borderColor='extra-light'
@@ -146,7 +160,8 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
           medium
           onClick={handlePlay}
           aria-label={isPlaying ? pauseLabel : playLabel}
-          icon={isPlaying ? 'pause-shape-filled' : 'play-shape-filled'}
+          icon={getIcon(isLoading, isPlaying)}
+          disabled={isLoading}
         />
         <Margins inline={8}>
           <Box fontScale='p2' color='secondary-info'>
@@ -160,6 +175,7 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
               showOutput={false}
               value={currentTime}
               maxValue={durationTime}
+              disabled={isLoading}
               onChange={(value) => {
                 if (audioRef.current) {
                   audioRef.current.currentTime = value;
@@ -171,6 +187,7 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
           <Button
             secondary
             small
+            disabled={isLoading}
             onClick={handlePlaybackSpeedSingleControl}
             aria-label={changePlaybackSpeedLabel}
           >
@@ -200,6 +217,9 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
           onTimeUpdate={(e) => {
             setCurrentTime((e.target as HTMLAudioElement).currentTime);
           }}
+          onLoadStart={() => {
+            setIsLoading(true);
+          }}
           onLoadedMetadata={(e) => {
             const { duration } = e.target as HTMLAudioElement;
 
@@ -209,6 +229,9 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
 
             getDurationForInfinityDurationAudioFile(src, setDurationTime);
           }}
+          onCanPlay={() => {
+            setIsLoading(false);
+          }}
           onEnded={() => setIsPlaying(false)}
           ref={refs}
           preload='metadata'

From d84afebb485887241031ab90f708fc8f417f6088 Mon Sep 17 00:00:00 2001
From: Durgesh <84910181+Durgesh-babu@users.noreply.github.com>
Date: Sun, 1 Feb 2026 19:34:06 +0530
Subject: [PATCH 2/4] fix(fuselage): audio seek/loading synchronization

---
 .../src/components/AudioPlayer/AudioPlayer.tsx         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
index 1028e1aefe..974059f105 100644
--- a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
+++ b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.tsx
@@ -104,6 +104,7 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
   ) => {
     const audioRef = useRef<HTMLAudioElement>(null);
     const refs = useMergedRefs(ref, audioRef);
+    const [isReady, setIsReady] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const [isPlaying, setIsPlaying] = useState(false);
     const [currentTime, setCurrentTime] = useState(0);
@@ -175,7 +176,7 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
               showOutput={false}
               value={currentTime}
               maxValue={durationTime}
-              disabled={isLoading}
+              disabled={!isReady}
               onChange={(value) => {
                 if (audioRef.current) {
                   audioRef.current.currentTime = value;
@@ -229,7 +230,14 @@ const AudioPlayer = forwardRef<HTMLAudioElement, AudioPlayerProps>(
 
             getDurationForInfinityDurationAudioFile(src, setDurationTime);
           }}
+          onSeeking={() => {
+            setIsLoading(true);
+          }}
+          onSeeked={() => {
+            setIsLoading(false);
+          }}
           onCanPlay={() => {
+            setIsReady(true);
             setIsLoading(false);
           }}
           onEnded={() => setIsPlaying(false)}

From f03e70bc613f0268d8ad7c58137ef2258c9ff502 Mon Sep 17 00:00:00 2001
From: Durgesh <84910181+Durgesh-babu@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:29:45 +0530
Subject: [PATCH 3/4] feat(fuselage): enhance AudioPlayer stories with template
 and download option

---
 .../AudioPlayer/AudioPlayer.stories.tsx         | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.stories.tsx b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.stories.tsx
index aa063feafe..baf0031520 100644
--- a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.stories.tsx
+++ b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta } from '@storybook/react-webpack5';
+import type { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import AudioPlayer from './AudioPlayer';
 
@@ -10,4 +10,17 @@ export default {
 const AUDIO_URL =
   'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-17.mp3';
 
-export const AudioPlayerDefault = () => <AudioPlayer src={AUDIO_URL} />;
+const Template: StoryFn<typeof AudioPlayer> = (args) => (
+  <AudioPlayer {...args} />
+);
+
+export const AudioPlayerDefault = Template.bind({});
+AudioPlayerDefault.args = {
+  src: AUDIO_URL,
+};
+
+export const AudioPlayerWithDownload = Template.bind({});
+AudioPlayerWithDownload.args = {
+  src: AUDIO_URL,
+  download: true,
+};

From 1f412b81a4d607347a0629ec1cb42a5c9e6e05cd Mon Sep 17 00:00:00 2001
From: Durgesh <84910181+Durgesh-babu@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:30:05 +0530
Subject: [PATCH 4/4] test(fuselage): add unit tests for AudioPlayer component
 functionality

---
 .../AudioPlayer/AudioPlayer.spec.tsx          | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/fuselage/src/components/AudioPlayer/AudioPlayer.spec.tsx

diff --git a/packages/fuselage/src/components/AudioPlayer/AudioPlayer.spec.tsx b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.spec.tsx
new file mode 100644
index 0000000000..ddda27b058
--- /dev/null
+++ b/packages/fuselage/src/components/AudioPlayer/AudioPlayer.spec.tsx
@@ -0,0 +1,69 @@
+import { composeStories } from '@storybook/react-webpack5';
+import { fireEvent } from '@testing-library/dom';
+
+import { render } from '../../testing';
+
+import AudioPlayer from './AudioPlayer';
+import * as stories from './AudioPlayer.stories';
+
+const { AudioPlayerDefault, AudioPlayerWithDownload } = composeStories(stories);
+
+describe('[AudioPlayer Component]', () => {
+  describe('Story renders without crashing', () => {
+    it('AudioPlayerDefault', () => {
+      render(<AudioPlayerDefault />);
+    });
+    it('AudioPlayerWithDownload', () => {
+      render(<AudioPlayerWithDownload />);
+    });
+  });
+});
+
+it('should display the audio player', () => {
+  const { container } = render(<AudioPlayer src='#' />);
+  expect(container.querySelector('audio')).toBeInTheDocument();
+});
+
+it('should display the download button when download prop is true', () => {
+  const { container } = render(<AudioPlayer src='#' download />);
+  expect(container.querySelector('a[download]')).toBeInTheDocument();
+});
+
+it('should display the loading state when the audio is loading', () => {
+  const { container } = render(<AudioPlayer src='#' />);
+  const audio = container.querySelector('audio');
+
+  if (audio) {
+    fireEvent(audio, new Event('loadstart'));
+  }
+
+  expect(
+    container.querySelector('.rcx-audio-player--loading'),
+  ).toBeInTheDocument();
+});
+
+it('should display the play button when the audio is not playing', () => {
+  const { container } = render(<AudioPlayer src='#' />);
+  const audio = container.querySelector('audio');
+
+  if (audio) {
+    fireEvent(audio, new Event('canplay'));
+  }
+
+  expect(
+    container.querySelector('button[aria-label="Play"]'),
+  ).toBeInTheDocument();
+});
+
+it('should display the pause button when the audio is playing', () => {
+  const { container } = render(<AudioPlayer src='#' />);
+  const audio = container.querySelector('audio');
+
+  if (audio) {
+    fireEvent(audio, new Event('play'));
+  }
+
+  expect(
+    container.querySelector('button[aria-label="Pause"]'),
+  ).toBeInTheDocument();
+});