From bba12ac905e19ec9f98f5f1296f905eca9b34d02 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 26 Feb 2026 17:20:35 +0530
Subject: [PATCH] fix(27-01): add ignore flag to prevent unmount state updates

- Add let ignore = false at start of duration fetch useEffect
- Check ignore flag after async jamClient call
- Add cleanup function that sets ignore = true
- Prevents 'state update on unmounted component' React warnings
  when closing backing track popup quickly
---
 .../client/JKSessionBackingTrackPlayer.js     | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js b/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js
index 8ef507376..4e558bdc5 100644
--- a/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js
+++ b/jam-ui/src/components/client/JKSessionBackingTrackPlayer.js
@@ -88,6 +88,8 @@ const JKSessionBackingTrackPlayer = ({
   }, []);
 
   useEffect(() => {
+    let ignore = false;
+
     // For popup mode, treat as always "open" since the popup window itself indicates open state
     const shouldInitialize = (isOpen || isPopup) && backingTrack && jamClient;
 
@@ -99,16 +101,23 @@ const JKSessionBackingTrackPlayer = ({
 
       // Fetch and set duration immediately when track loads (async)
       const fetchDuration = async () => {
+        if (ignore) return;
         setIsLoadingDuration(true);
+
         try {
           if (!jamClient) {
-            handleError('general', 'Audio engine not available', null);
-            setIsLoadingDuration(false);
+            if (!ignore) {
+              handleError('general', 'Audio engine not available', null);
+              setIsLoadingDuration(false);
+            }
             return;
           }
 
           const durationInMs = await jamClient.SessionGetTracksPlayDurationMs();
 
+          // Check ignore AFTER async operation
+          if (ignore) return;
+
           // Convert string to number (jamClient returns string values)
           const validDuration = parseInt(durationInMs, 10) || 0;
 
@@ -131,15 +140,21 @@ const JKSessionBackingTrackPlayer = ({
           clearError(); // Clear any previous errors
           setIsLoadingDuration(false);
         } catch (error) {
-          handleError('file', 'Failed to load track duration', error);
-          setDuration('0:00');
-          setDurationMs(0);
-          setIsLoadingDuration(false);
+          if (!ignore) {
+            handleError('file', 'Failed to load track duration', error);
+            setDuration('0:00');
+            setDurationMs(0);
+            setIsLoadingDuration(false);
+          }
         }
       };
 
       fetchDuration();
     }
+
+    return () => {
+      ignore = true;
+    };
   }, [isOpen, isPopup, backingTrack, jamClient, handleError, formatTime, clearError]);
 
   // Playback monitoring with visibility-aware polling