DataSync: fixed connections closed when it's still needed

lib/IHP/DataSync/ihp-datasync.js

@@ -352,6 +352,11 @@ class DataSubscription {
             return;
         }
 
+        // Set isClosed early as we need to prevent a second close() from triggering another DeleteDataSubscription message
+        // also we don't want to receive any further messages, and onMessage will not process if isClosed == true
+        this.isClosed = true;
+        this.onClose();
+
         const dataSyncController = DataSyncController.getInstance();
         const { subscriptionId } = await dataSyncController.sendMessage({ tag: 'DeleteDataSubscription', subscriptionId: this.subscriptionId });
 
@@ -360,10 +365,7 @@ class DataSubscription {
         dataSyncController.removeEventListener('reconnect', this.onDataSyncReconnect);
         dataSyncController.dataSubscriptions.splice(dataSyncController.dataSubscriptions.indexOf(this), 1);
 
-        this.isClosed = true;
         this.isConnected = false;
-
-        this.onClose();
     }
 
     onDataSyncClosed() {
@@ -425,7 +427,9 @@ class DataSubscription {
         return () => {
             this.subscribers.splice(this.subscribers.indexOf(callback), 1);
 
-            this.closeIfNotUsed();
+            // We delay the close as react could be re-rendering a component
+            // we garbage collect this connecetion once it's clearly not used anymore
+            setTimeout(this.closeIfNotUsed.bind(this), 1000);
         }
     }