Lazy-load recommendation indexes

js/app/feedCoordinator.js

@@ -1014,6 +1014,14 @@ export function createFeedCoordinator(deps) {
       devLogger.log(`Starting loadFeedVideos(${feedType})... (forceFetch =`, forceFetch, ")");
       this.setFeedTelemetryContext(feedType);
 
+      const recommendationFeed =
+        feedType === FEED_TYPES.FOR_YOU || feedType === FEED_TYPES.EXPLORE;
+      if (recommendationFeed && typeof this.ensureExploreDataService === "function") {
+        await this.ensureExploreDataService();
+      } else if (this.exploreDataService?.setActive) {
+        this.exploreDataService.setActive(false);
+      }
+
       let includeTags = false;
       let loadingMessage = "Fetching videos\u2026";
       let refreshMethod = null;

js/services/exploreDataService.js

@@ -144,26 +144,47 @@ export default class ExploreDataService {
     this.tagIdfInterval = null;
     this.unsubscribeHandlers = [];
     this.handleVisibility = this.handleVisibility.bind(this);
+    this.initialized = false;
+    this.active = false;
+    this.historyDirty = true;
+    this.idfDirty = true;
   }
 
-  initialize() {
-    this.refreshWatchHistoryTagCounts({ force: true, reason: "init" });
-    this.refreshTagIdf({ force: true, reason: "init" });
+  initialize({ active = false } = {}) {
+    if (this.initialized) {
+      return this.setActive(active);
+    }
+    this.initialized = true;
     this.subscribeToUpdates();
     if (typeof document !== "undefined") {
       document.addEventListener("visibilitychange", this.handleVisibility);
     }
+    return this.setActive(active);
+  }
+
+  async setActive(active) {
+    this.active = active === true;
+    if (!this.active || (typeof document !== "undefined" && document.hidden)) {
+      this.clearIntervals();
+      return;
+    }
     this.startIntervals();
+    const forceHistory = this.historyDirty || !this.watchHistoryTagCountsUpdatedAt;
+    const forceIdf = this.idfDirty || !this.tagIdfUpdatedAt;
+    this.historyDirty = false;
+    this.idfDirty = false;
+    await Promise.all([
+      this.refreshWatchHistoryTagCounts({ force: forceHistory, reason: "active" }),
+      this.refreshTagIdf({ force: forceIdf, reason: "active" }),
+    ]);
   }
 
   handleVisibility() {
     if (typeof document === "undefined") return;
     if (document.hidden) {
       this.clearIntervals();
-    } else {
-      this.refreshWatchHistoryTagCounts({ reason: "visibility" });
-      this.refreshTagIdf({ reason: "visibility" });
-      this.startIntervals();
+    } else if (this.active) {
+      void this.setActive(true);
     }
   }
 
@@ -226,6 +247,10 @@ export default class ExploreDataService {
   }
 
   queueWatchHistoryRefresh(reason) {
+    if (!this.active) {
+      this.historyDirty = true;
+      return;
+    }
     if (this.watchHistoryRefreshHandle) {
       return;
     }
@@ -236,6 +261,10 @@ export default class ExploreDataService {
   }
 
   queueTagIdfRefresh(reason) {
+    if (!this.active) {
+      this.idfDirty = true;
+      return;
+    }
     if (this.tagIdfRefreshHandle) {
       return;
     }

js/ui/applicationBootstrap.js

@@ -360,18 +360,22 @@ export default class ApplicationBootstrap {
       onViewLogged: (detail) => app.handleFeedViewTelemetry(detail),
     });
 
-    app.exploreDataService =
-      this.services.exploreDataService ||
-      new ExploreDataService({
-        watchHistoryService,
-        nostrService: app.nostrService,
-        getActiveActor: () =>
-          typeof app.pubkey === "string" && app.pubkey ? app.pubkey : "",
-        logger: devLogger,
-      });
-    if (app.exploreDataService && typeof app.exploreDataService.initialize === "function") {
-      app.exploreDataService.initialize();
-    }
+    app.exploreDataService = this.services.exploreDataService || null;
+    app.ensureExploreDataService = async () => {
+      if (!app.exploreDataService) {
+        app.exploreDataService = new ExploreDataService({
+          watchHistoryService,
+          nostrService: app.nostrService,
+          getActiveActor: () =>
+            typeof app.pubkey === "string" && app.pubkey ? app.pubkey : "",
+          logger: devLogger,
+        });
+      }
+      if (typeof app.exploreDataService.initialize === "function") {
+        await app.exploreDataService.initialize({ active: true });
+      }
+      return app.exploreDataService;
+    };
 
     const playbackDependencies = {
       torrentClient: this.services.torrentClient || torrentClient,