From ee1c884ef134038131216136bed6ce63090c5a09 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 13 Apr 2017 17:19:54 -0400
Subject: [PATCH] load vault in chunks so that it appears faster

---
 src/app/vault/vaultController.js | 47 ++++++++++++++++++++++++++++----
 src/app/vault/views/vault.html   |  6 ++--
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/app/vault/vaultController.js b/src/app/vault/vaultController.js
index 3af5f9766f..8708f21ff7 100644
--- a/src/app/vault/vaultController.js
+++ b/src/app/vault/vaultController.js
@@ -2,7 +2,7 @@
     .module('bit.vault')
 
     .controller('vaultController', function ($scope, $uibModal, apiService, $filter, cryptoService, authService, toastr,
-        cipherService, $q, $localStorage) {
+        cipherService, $q, $localStorage, $timeout) {
         $scope.logins = [];
         $scope.folders = [];
         $scope.loading = true;
@@ -22,7 +22,7 @@
                     decFolders.push(decFolder);
                 }
 
-                $scope.folders = decFolders;
+                $scope.folders = $filter('orderBy')(decFolders, folderSort);
             }).$promise;
 
             var cipherPromise = apiService.ciphers.list({}, function (ciphers) {
@@ -35,15 +35,52 @@
                     }
                 }
 
-                $scope.logins = decLogins;
+                $q.when(folderPromise).then(function () {
+                    angular.forEach($scope.folders, function (folderValue, folderIndex) {
+                        angular.forEach(decLogins, function (loginValue) {
+                            if (loginValue.favorite) {
+                                loginValue.sort = -1;
+                            }
+                            else if (loginValue.folderId == folderValue.id) {
+                                loginValue.sort = folderIndex;
+                            }
+                        });
+                    });
+
+                    decLogins = $filter('orderBy')(decLogins, ['sort', 'name', 'username']);
+
+                    var chunks = chunk(decLogins, 100);
+                    $scope.logins = chunks[0];
+                    var delay = 100;
+                    angular.forEach(chunks, function (value, index) {
+                        delay += 100;
+
+                        // skip the first chuck
+                        if (index > 0) {
+                            $timeout(function () {
+                                Array.prototype.push.apply($scope.logins, value);
+                            }, delay);
+                        }
+                    });
+                });
             }).$promise;
 
-            $q.all([folderPromise, cipherPromise]).then(function () {
+            $q.when(cipherPromise).then(function () {
                 $scope.loading = false;
             });
         });
 
-        $scope.folderSort = function (item) {
+        function chunk(arr, len) {
+            var chunks = [],
+                i = 0,
+                n = arr.length;
+            while (i < n) {
+                chunks.push(arr.slice(i, i += len));
+            }
+            return chunks;
+        }
+
+        function folderSort(item) {
             if (!item.id) {
                 return '';
             }
diff --git a/src/app/vault/views/vault.html b/src/app/vault/views/vault.html
index ef5c8a04eb..f8d7109c02 100644
--- a/src/app/vault/views/vault.html
+++ b/src/app/vault/views/vault.html
@@ -9,7 +9,7 @@
         <p>Loading...</p>
     </div>
     <div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;"
-         ng-show="!loading && (!main.searchVaultText || favoriteLogins.length)">
+         ng-show="folders.length && (!main.searchVaultText || favoriteLogins.length)">
         <div class="box-header with-border">
             <h3 class="box-title">
                 <i class="fa fa-star"></i>
@@ -85,7 +85,7 @@
             </div>
         </div>
     </div>
-    <div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in folders | orderBy: folderSort"
+    <div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in folders"
          ng-show="folders.length && (!main.searchVaultText || folderLogins.length)">
         <div class="box-header with-border">
             <h3 class="box-title">
@@ -131,7 +131,7 @@
                 <table class="table table-striped table-hover table-vmiddle">
                     <tbody>
                         <tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } |
-                            filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
+                            filter: (main.searchVaultText || ''))">
                             <td style="width: 70px;">
                                 <div class="btn-group" uib-dropdown dropdown-append-to-body>
                                     <button type="button" class="btn btn-default" uib-dropdown-toggle>