fix(core): audio player loading styles (#11384)

fix BS-2998

packages/frontend/component/src/ui/audio-player/audio-player.stories.tsx

@@ -253,6 +253,7 @@ const AudioWrapper = () => {
     <div
       style={{
         width: '100%',
+        minWidth: '600px',
         minHeight: '200px',
         border: '2px dashed #ccc',
         borderRadius: '8px',
@@ -305,7 +306,7 @@ const AudioWrapper = () => {
             playbackState={playbackState}
             seekTime={seekTime}
             duration={duration}
-            loading={loading}
+            loading={loading || waveform === null}
             onPlay={handlePlay}
             onPause={handlePause}
             onStop={handleStop}

packages/frontend/component/src/ui/audio-player/audio-player.tsx

@@ -82,12 +82,6 @@ export const AudioPlayer = ({
 
   // Calculate progress percentage
   const progressPercentage = duration > 0 ? seekTime / duration : 0;
-  const iconState = loading
-    ? 'loading'
-    : playbackState === 'playing'
-      ? 'pause'
-      : 'play';
-
   return (
     <div className={styles.root} onClick={onClick}>
       <div className={styles.upper}>
@@ -107,7 +101,7 @@ export const AudioPlayer = ({
           <AnimatedPlayIcon
             onClick={handlePlayToggle}
             className={styles.controlButton}
-            state={iconState}
+            state={playbackState === 'playing' ? 'pause' : 'play'}
           />
         </div>
       </div>
@@ -117,6 +111,7 @@ export const AudioPlayer = ({
           waveform={waveform || []}
           progress={progressPercentage}
           onManualSeek={handleProgressClick}
+          loading={loading}
         />
         <div className={styles.timeDisplay}>{formatTime(duration)}</div>
       </div>
@@ -183,12 +178,6 @@ export const MiniAudioPlayer = ({
 
   // Calculate progress percentage
   const progressPercentage = duration > 0 ? seekTime / duration : 0;
-  const iconState =
-    playbackState === 'playing'
-      ? 'pause'
-      : playbackState === 'paused'
-        ? 'play'
-        : 'loading';
 
   return (
     <div className={styles.miniRoot} onClick={onClick}>
@@ -203,7 +192,7 @@ export const MiniAudioPlayer = ({
         <AnimatedPlayIcon
           onClick={handlePlayToggle}
           className={styles.controlButton}
-          state={iconState}
+          state={playbackState === 'playing' ? 'pause' : 'play'}
         />
 
         <IconButton

packages/frontend/component/src/ui/audio-player/audio-waveform.tsx

@@ -2,6 +2,7 @@ import { type AffineThemeKeyV2, cssVarV2 } from '@toeverything/theme/v2';
 import { clamp } from 'lodash-es';
 import { useCallback, useEffect, useRef } from 'react';
 
+import { Skeleton } from '../skeleton';
 import * as styles from './audio-waveform.css';
 
 // Helper function to get computed CSS variable value
@@ -113,11 +114,13 @@ export const AudioWaveform = ({
   progress,
   onManualSeek,
   mini = false, // the bar will be 0.5px instead. by default, the bar is 1px
+  loading = false,
 }: {
   waveform: number[];
   progress: number;
   onManualSeek: (progress: number) => void;
   mini?: boolean;
+  loading?: boolean;
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -176,7 +179,11 @@ export const AudioWaveform = ({
       aria-valuemax={100}
       aria-valuenow={progress * 100}
     >
-      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
+      {loading ? (
+        <Skeleton />
+      ) : (
+        <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
+      )}
     </div>
   );
 };