+Two changes needed:
+
+**1. Import and call cleanup on unmount:**
+
+Add to imports (around line 4-9):
+```javascript
+import {
+ loadJamTrack,
+ checkJamTrackSync,
+ closeJamTrack,
+ setJamTrackState,
+ setDownloadState,
+ cleanupJamTrackCallbacks // Add this
+} from '../../store/features/mediaSlice';
+```
+
+Update the cleanup useEffect (around lines 163-172) to also call cleanup:
+```javascript
+useEffect(() => {
+ return () => {
+ mountedRef.current = false;
+
+ if (fqIdRef.current && jamClient) {
+ dispatch(closeJamTrack({ fqId: fqIdRef.current, jamClient }));
+ dispatch(clearOpenJamTrack());
+ }
+
+ // Clean up download callbacks
+ cleanupJamTrackCallbacks();
+ };
+}, [dispatch, jamClient]);
+```
+
+**2. Defer controls rendering until track is ready:**
+
+Find the Controls Section (around line 720) and wrap it in a condition that checks if the track is ready:
+
+```jsx
+{/* Controls Section - only show when not in loading/download states */}
+{(downloadState.state === 'idle' || downloadState.state === 'synchronized') && !isLoadingSync && (
+
+ {/* ... existing controls ... */}
+
+)}
+```
+
+This ensures the playback controls only appear when:
+- downloadState is 'idle' (local file already synced) OR 'synchronized' (download complete)
+- AND not in initial loading state
+
+The download progress UI (lines 593-711) already shows during download states, so this creates proper UX flow: loading -> download progress -> controls appear.
+
+