Merge pull request #2079 from PR0M3TH3AN/fix-profile-modal-lag-8999038983484394893

Defer profile modal data loading to improve responsiveness

js/ui/profileModalController.js

@@ -7403,52 +7403,54 @@ export class ProfileModalController {
     const shouldStayInMenu = keepMenuView && isMobile;
     this.setMobileView(shouldStayInMenu ? "menu" : "pane");
 
-    const activeHex = this.normalizeHexPubkey(this.getActivePubkey());
+    setTimeout(() => {
+      const activeHex = this.normalizeHexPubkey(this.getActivePubkey());
 
-    if (target === "history") {
-      void this.populateProfileWatchHistory();
-    } else if (target === "relays") {
-      this.populateProfileRelays();
-      void this.refreshRelayHealthPanel({
-        forceRefresh: true,
-        reason: "pane-select",
-      });
-    } else if (target === "messages") {
-      this.resumeProfileMessages();
-      void this.populateProfileMessages({ reason: "pane-select" });
-      void this.refreshDmRelayPreferences();
-    } else if (target === "wallet") {
-      this.refreshWalletPaneState();
-    } else if (target === "storage") {
-      this.populateStoragePane();
-    } else if (target === "hashtags") {
-      this.populateHashtagPreferences();
-      if (activeHex && this.hashtagPreferencesService) {
-        this.hashtagPreferencesService
-          .load(activeHex, { allowPermissionPrompt: true })
-          .catch(noop);
+      if (target === "history") {
+        void this.populateProfileWatchHistory();
+      } else if (target === "relays") {
+        this.populateProfileRelays();
+        void this.refreshRelayHealthPanel({
+          forceRefresh: true,
+          reason: "pane-select",
+        });
+      } else if (target === "messages") {
+        this.resumeProfileMessages();
+        void this.populateProfileMessages({ reason: "pane-select" });
+        void this.refreshDmRelayPreferences();
+      } else if (target === "wallet") {
+        this.refreshWalletPaneState();
+      } else if (target === "storage") {
+        this.populateStoragePane();
+      } else if (target === "hashtags") {
+        this.populateHashtagPreferences();
+        if (activeHex && this.hashtagPreferencesService) {
+          this.hashtagPreferencesService
+            .load(activeHex, { allowPermissionPrompt: true })
+            .catch(noop);
+        }
+        this.refreshHashtagBackgroundStatus();
+      } else if (target === "subscriptions") {
+        if (activeHex && this.subscriptionsService) {
+          this.subscriptionsService
+            .loadSubscriptions(activeHex, { allowPermissionPrompt: true })
+            .catch(noop);
+        }
+        void this.populateSubscriptionsList();
+        this.refreshSubscriptionsBackgroundStatus();
+      } else if (target === "blocked") {
+        if (activeHex && this.services.userBlocks) {
+          this.services.userBlocks.loadBlocks(activeHex).catch(noop);
+        }
+        this.populateBlockedList();
+      } else if (target === "safety") {
+        this.refreshModerationSettingsUi();
+        this.syncLinkPreviewSettingsUi();
       }
-      this.refreshHashtagBackgroundStatus();
-    } else if (target === "subscriptions") {
-      if (activeHex && this.subscriptionsService) {
-        this.subscriptionsService
-          .loadSubscriptions(activeHex, { allowPermissionPrompt: true })
-          .catch(noop);
-      }
-      void this.populateSubscriptionsList();
-      this.refreshSubscriptionsBackgroundStatus();
-    } else if (target === "blocked") {
-      if (activeHex && this.services.userBlocks) {
-        this.services.userBlocks.loadBlocks(activeHex).catch(noop);
-      }
-      this.populateBlockedList();
-    } else if (target === "safety") {
-      this.refreshModerationSettingsUi();
-      this.syncLinkPreviewSettingsUi();
-    }
 
-    this.callbacks.onSelectPane(target, { controller: this });
-    this.callbacks.onPaneShown(target, { controller: this });
+      this.callbacks.onSelectPane(target, { controller: this });
+      this.callbacks.onPaneShown(target, { controller: this });
+    }, 0);
   }
 
   populateProfileRelays(relayEntries = null) {

tests/profile-modal-controller.test.mjs

@@ -1026,6 +1026,7 @@ test('show()/hide() toggle panes, trap focus, and refresh the wallet pane', asyn
   focusBefore.focus();
 
   await controller.show('wallet');
+  await new Promise((resolve) => setTimeout(resolve, 0));
 
   assert.equal(adminRefreshes, 1);
   assert.equal(walletRefreshes, 2);
@@ -1258,6 +1259,7 @@ test('history pane lazily initializes the watch history renderer', async () => {
     // First show: Should call ensureInitialLoad but NOT refresh (optimized)
   controller.setActivePubkey(defaultActorHex);
   await controller.show('history');
+  await new Promise((resolve) => setTimeout(resolve, 0));
   await Promise.resolve();
 
   assert.ok(capturedConfig);
@@ -1286,6 +1288,7 @@ test('history pane lazily initializes the watch history renderer', async () => {
     // Switch back to history. Renderer is still alive and initialized.
     // Should call refresh + resume.
     controller.selectPane('history');
+    await new Promise((resolve) => setTimeout(resolve, 0));
     await Promise.resolve();
 
     assert.deepEqual(historyCalls, [