Fixed #2338 -> Slow opening of big boards with too many archived items

2 files changed, 71 insertions, 47 deletions

diff --git a/client/components/sidebar/sidebarArchives.jade b/client/components/sidebar/sidebarArchives.jade
index e2f3e395..466d2cb0 100644
--- a/client/components/sidebar/sidebarArchives.jade
+++ b/client/components/sidebar/sidebarArchives.jade
@@ -1,54 +1,56 @@
 template(name="archivesSidebar")
-  +basicTabs(tabs=tabs)
-
-   +tabContent(slug="cards")
-    p.quiet
-      a.js-restore-all-cards {{_ 'restore-all'}}
-      | -
-      a.js-delete-all-cards {{_ 'delete-all'}}
-    each archivedCards
-      .minicard-wrapper.js-minicard
-        +minicard(this)
-      if currentUser.isBoardMember
+  if isArchiveReady.get
+    +basicTabs(tabs=tabs)
+      +tabContent(slug="cards")
         p.quiet
-          a.js-restore-card {{_ 'restore'}}
+          a.js-restore-all-cards {{_ 'restore-all'}}
           | -
-          a.js-delete-card {{_ 'delete'}}
-        if cardIsInArchivedList
-          p.quiet.small ({{_ 'warn-list-archived'}})
-    else
-      p.no-items-message {{_ 'no-archived-cards'}}
-
-   +tabContent(slug="lists")
-    p.quiet
-      a.js-restore-all-lists {{_ 'restore-all'}}
-      | -
-      a.js-delete-all-lists {{_ 'delete-all'}}
-    ul.archived-lists
-      each archivedLists
-        li.archived-lists-item
-          = title
+          a.js-delete-all-cards {{_ 'delete-all'}}
+        each archivedCards
+          .minicard-wrapper.js-minicard
+            +minicard(this)
           if currentUser.isBoardMember
             p.quiet
-              a.js-restore-list {{_ 'restore'}}
+              a.js-restore-card {{_ 'restore'}}
               | -
-              a.js-delete-list {{_ 'delete'}}
-      else
-        li.no-items-message {{_ 'no-archived-lists'}}
+              a.js-delete-card {{_ 'delete'}}
+            if cardIsInArchivedList
+              p.quiet.small ({{_ 'warn-list-archived'}})
+        else
+          p.no-items-message {{_ 'no-archived-cards'}}
 
-   +tabContent(slug="swimlanes")
-    p.quiet
-      a.js-restore-all-swimlanes {{_ 'restore-all'}}
-      | -
-      a.js-delete-all-swimlanes {{_ 'delete-all'}}
-    ul.archived-lists
-      each archivedSwimlanes
-        li.archived-lists-item
-          = title
-          if currentUser.isBoardMember
-            p.quiet
-              a.js-restore-swimlane {{_ 'restore'}}
-              | -
-              a.js-delete-swimlane {{_ 'delete'}}
-      else
-        li.no-items-message {{_ 'no-archived-swimlanes'}}
+      +tabContent(slug="lists")
+        p.quiet
+          a.js-restore-all-lists {{_ 'restore-all'}}
+          | -
+          a.js-delete-all-lists {{_ 'delete-all'}}
+        ul.archived-lists
+          each archivedLists
+            li.archived-lists-item
+              = title
+              if currentUser.isBoardMember
+                p.quiet
+                  a.js-restore-list {{_ 'restore'}}
+                  | -
+                  a.js-delete-list {{_ 'delete'}}
+          else
+            li.no-items-message {{_ 'no-archived-lists'}}
+
+      +tabContent(slug="swimlanes")
+        p.quiet
+          a.js-restore-all-swimlanes {{_ 'restore-all'}}
+          | -
+          a.js-delete-all-swimlanes {{_ 'delete-all'}}
+        ul.archived-lists
+          each archivedSwimlanes
+            li.archived-lists-item
+              = title
+              if currentUser.isBoardMember
+                p.quiet
+                  a.js-restore-swimlane {{_ 'restore'}}
+                  | -
+                  a.js-delete-swimlane {{_ 'delete'}}
+          else
+            li.no-items-message {{_ 'no-archived-swimlanes'}}
+  else
+    +spinner
diff --git a/client/components/sidebar/sidebarArchives.js b/client/components/sidebar/sidebarArchives.js
index b50043fd..546d7e1a 100644
--- a/client/components/sidebar/sidebarArchives.js
+++ b/client/components/sidebar/sidebarArchives.js
@@ -1,4 +1,26 @@
+const subManager = new SubsManager();
+
 BlazeComponent.extendComponent({
+  onCreated() {
+    this.isArchiveReady = new ReactiveVar(false);
+
+    // The pattern we use to manually handle data loading is described here:
+    // https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/using-subs-manager
+    // XXX The boardId should be readed from some sort the component "props",
+    // unfortunatly, Blaze doesn't have this notion.
+    this.autorun(() => {
+      const currentBoardId = Session.get('currentBoard');
+      if (!currentBoardId)
+        return;
+      const handle = subManager.subscribe('board', currentBoardId, true);
+      Tracker.nonreactive(() => {
+        Tracker.autorun(() => {
+          this.isArchiveReady.set( handle.ready() );
+        });
+      });
+    });
+  },
+
   tabs() {
     return [
       { name: TAPi18n.__('cards'), slug: 'cards' },