Add storage event listener only when there is at least one WebStorage API subscriber

Signed-off-by: Dawit Ameneshewa <dawitam11@gmail.com>

packages/core-app-api/src/apis/implementations/StorageApi/WebStorage.ts

@@ -24,14 +24,6 @@ import ObservableImpl from 'zen-observable';
 
 const buckets = new Map<string, WebStorage>();
 
-window.addEventListener('storage', event => {
-  for (const [bucketPath, webStorage] of buckets.entries()) {
-    if (event.key?.startsWith(bucketPath)) {
-      webStorage.handleStorageChange(event.key);
-    }
-  }
-});
-
 /**
  * An implementation of the storage API, that uses the browser's local storage.
  *
@@ -43,6 +35,8 @@ export class WebStorage implements StorageApi {
     private readonly errorApi: ErrorApi,
   ) {}
 
+  private static hasSubscribers = false;
+
   static create(options: {
     errorApi: ErrorApi;
     namespace?: string;
@@ -50,6 +44,16 @@ export class WebStorage implements StorageApi {
     return new WebStorage(options.namespace ?? '', options.errorApi);
   }
 
+  private static addStorageEventListener() {
+    window.addEventListener('storage', event => {
+      for (const [bucketPath, webStorage] of buckets.entries()) {
+        if (event.key?.startsWith(bucketPath)) {
+          webStorage.handleStorageChange(event.key);
+        }
+      }
+    });
+  }
+
   get<T>(key: string): T | undefined {
     return this.snapshot(key).value as T | undefined;
   }
@@ -97,6 +101,10 @@ export class WebStorage implements StorageApi {
   observe$<T extends JsonValue>(
     key: string,
   ): Observable<StorageValueSnapshot<T>> {
+    if (!WebStorage.hasSubscribers) {
+      WebStorage.addStorageEventListener();
+      WebStorage.hasSubscribers = true;
+    }
     return this.observable.filter(({ key: messageKey }) => messageKey === key);
   }