show disabled slider when no waveform available

src/renderer/features/player/components/playerbar-slider.module.css

@@ -74,14 +74,3 @@
     align-items: center;
     height: 100%;
 }
-
-.wavesurfer-container {
-    width: 100%;
-    cursor: pointer;
-}
-
-.waveform {
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}

src/renderer/features/player/components/playerbar-waveform.module.css

@@ -0,0 +1,10 @@
+.wavesurfer-container {
+    width: 100%;
+    cursor: pointer;
+}
+
+.waveform {
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}

src/renderer/features/player/components/playerbar-waveform.tsx

@@ -2,7 +2,8 @@ import { useWavesurfer } from '@wavesurfer/react';
 import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import styles from './playerbar-slider.module.css';
+import { CustomPlayerbarSlider } from './playerbar-slider';
+import styles from './playerbar-waveform.module.css';
 
 import { api } from '/@/renderer/api';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
@@ -150,6 +151,23 @@ export const PlayerbarWaveform = () => {
         }
     }, [wavesurfer, currentTime, songDuration]);
 
+    // Show disabled slider when there's no current song
+    if (!currentSong) {
+        return (
+            <CustomPlayerbarSlider
+                disabled
+                max={100}
+                min={0}
+                onClick={(e) => {
+                    e?.stopPropagation();
+                }}
+                size={6}
+                value={0}
+                w="100%"
+            />
+        );
+    }
+
     return (
         <div
             className={styles.wavesurferContainer}