Make the org and user views more performant by only loading teams and robots when requested, making some loads async, and skipping others entirely on mobile

static/directives/robots-manager.html

@@ -5,7 +5,8 @@
     <div class="manager-header" header-title="Robot Accounts">
       <span class="popup-input-button" pattern="ROBOT_PATTERN"
             placeholder="'Robot Account Name'"
-            submitted="createRobot(value)">
+            submitted="createRobot(value)"
+            ng-show="isEnabled">
         <i class="fa fa-plus"></i> Create Robot Account
       </span>
     </div>

static/directives/teams-manager.html

@@ -46,7 +46,7 @@
           <span class="team-member-more"
                 ng-if="members[team.name].members.length > 20">+ {{ members[team.name].members.length - 20 }} more team members.</span>
           <span class="team-member-more"
-                ng-if="!members[team.name].members.length">(Empty Team)</span>
+                ng-if="members[team.name].members && !members[team.name].members.length">(Empty Team)</span>
         </div>
       </div>
 

static/js/directives/ui/robots-manager.js

@@ -10,7 +10,8 @@ angular.module('quay').directive('robotsManager', function () {
     restrict: 'C',
     scope: {
       'organization': '=organization',
-      'user': '=user'
+      'user': '=user',
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, ApiService, $routeParams, CreateService, Config) {
       $scope.ROBOT_PATTERN = ROBOT_PATTERN;
@@ -101,7 +102,7 @@ angular.module('quay').directive('robotsManager', function () {
 
       var update = function() {
         if (!$scope.user && !$scope.organization) { return; }
-        if ($scope.loading) { return; }
+        if ($scope.loading || !$scope.isEnabled) { return; }
 
         $scope.loading = true;
         ApiService.getRobots($scope.organization).then(function(resp) {
@@ -117,6 +118,7 @@ angular.module('quay').directive('robotsManager', function () {
         });
       };
 
+      $scope.$watch('isEnabled', update);
       $scope.$watch('organization', update);
       $scope.$watch('user', update);
     }

static/js/directives/ui/teams-manager.js

@@ -9,9 +9,10 @@ angular.module('quay').directive('teamsManager', function () {
     transclude: false,
     restrict: 'C',
     scope: {
-      'organization': '=organization'
+      'organization': '=organization',
+      'isEnabled': '=isEnabled'
     },
-    controller: function($scope, $element, ApiService, CreateService) {
+    controller: function($scope, $element, ApiService, CreateService, $timeout) {
       $scope.TEAM_PATTERN = TEAM_PATTERN;
       $scope.teamRoles = [
           { 'id': 'member', 'title': 'Member', 'kind': 'default' },
@@ -23,11 +24,20 @@ angular.module('quay').directive('teamsManager', function () {
       $scope.orderedTeams = [];
 
       var loadTeamMembers = function() {
-        if (!$scope.organization) { return; }
+        if (!$scope.organization || !$scope.isEnabled) { return; }
+
+        // Skip loading team members on mobile.
+        if (!window.matchMedia('(min-width: 768px)').matches) {
+          return;
+        }
 
         for (var name in $scope.organization.teams) {
-          if (!$scope.organization.teams.hasOwnProperty(name)) { continue; }
+          if (!$scope.organization.teams.hasOwnProperty(name) || $scope.members[name]) { continue; }
-          loadMembersOfTeam(name);
+
+          // Load fully async to prevent it from blocking the UI.
+          $timeout(function() {
+            loadMembersOfTeam(name);
+          }, 1);
         }
       };
 
@@ -47,7 +57,9 @@ angular.module('quay').directive('teamsManager', function () {
       };
 
       var loadOrderedTeams = function() {
-        if (!$scope.organization || !$scope.organization.ordered_teams) { return; }
+        if (!$scope.organization || !$scope.organization.ordered_teams || !$scope.isEnabled) {
+          return;
+        }
 
         $scope.orderedTeams = [];
         $scope.organization.ordered_teams.map(function(name) {
@@ -58,6 +70,9 @@ angular.module('quay').directive('teamsManager', function () {
       $scope.$watch('organization', loadOrderedTeams);
       $scope.$watch('organization', loadTeamMembers);
 
+      $scope.$watch('isEnabled', loadOrderedTeams);
+      $scope.$watch('isEnabled', loadTeamMembers);
+
       $scope.setRole = function(role, teamname) {
         var previousRole = $scope.organization.teams[teamname].role;
         $scope.organization.teams[teamname].role = role;

static/js/pages/org-view.js

@@ -19,6 +19,8 @@
     $scope.showLogsCounter = 0;
     $scope.showApplicationsCounter = 0;
     $scope.showInvoicesCounter = 0;
+    $scope.showRobotsCounter = 0;
+    $scope.showTeamsCounter = 0;
 
     $scope.orgScope = {
       'changingOrganization': false,
@@ -57,6 +59,14 @@
     // Load the organization.
     loadOrganization();
 
+    $scope.showRobots = function() {
+      $scope.showRobotsCounter++;
+    };
+
+    $scope.showTeams = function() {
+      $scope.showTeamsCounter++;
+    };
+
     $scope.showInvoices = function() {
       $scope.showInvoicesCounter++;
     };

static/js/pages/user-view.js

@@ -15,6 +15,7 @@
 
     $scope.showInvoicesCounter = 0;
     $scope.showAppsCounter = 0;
+    $scope.showRobotsCounter = 0;
     $scope.changeEmailInfo = {};
     $scope.changePasswordInfo = {};
 
@@ -46,6 +47,10 @@
     // Load the user.
     loadUser();
 
+    $scope.showRobots = function() {
+      $scope.showRobotsCounter++;
+    };
+
     $scope.showInvoices = function() {
       $scope.showInvoicesCounter++;
     };

static/partials/org-admin.html

@@ -55,7 +55,7 @@
 
         <!-- Robot accounts tab -->
         <div id="robots" class="tab-pane">
-          <div class="robots-manager" organization="organization"></div>
+          <div class="robots-manager" organization="organization" is-enabled="true"></div>
         </div>
 
         <!-- Prototypes tab -->

static/partials/org-view.html

@@ -24,10 +24,11 @@
         <span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
           <i class="fa fa-hdd-o"></i>
         </span>
-        <span class="cor-tab" tab-title="Teams" tab-target="#teams">
+        <span class="cor-tab" tab-title="Teams" tab-target="#teams" tab-init="showTeams()">
           <i class="fa fa-users"></i>
         </span>
-        <span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots" ng-show="isAdmin">
+        <span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots" tab-init="showRobots()"
+              ng-show="isAdmin">
           <i class="fa fa-wrench"></i>
         </span>
         <span class="cor-tab" tab-title="Default Permissions" tab-target="#default" ng-show="isAdmin">
@@ -70,14 +71,14 @@
         <!-- Teams -->
         <div id="teams" class="tab-pane">
           <div ng-if="!user.anonymous">
-            <div class="teams-manager" organization="organization"></div>
+            <div class="teams-manager" organization="organization" is-enabled="showTeamsCounter"></div>
           </div>
         </div>
 
         <!-- Robot Accounts -->
         <div id="robots" class="tab-pane">
           <div ng-if="isAdmin">
-            <div class="robots-manager" organization="organization"></div>
+            <div class="robots-manager" organization="organization" is-enabled="showRobotsCounter"></div>
           </div>
         </div>
 

static/partials/user-admin.html

@@ -250,7 +250,7 @@
 
         <!-- Robot accounts tab -->
         <div id="robots" class="tab-pane">
-          <div class="robots-manager" user="user"></div>
+          <div class="robots-manager" user="user" is-enabled="true"></div>
         </div>
 
         <!-- Billing options tab -->

static/partials/user-view.html

@@ -23,7 +23,7 @@
         <span class="cor-tab" tab-active="true" tab-title="Repositories" tab-target="#repos">
           <i class="fa fa-hdd-o"></i>
         </span>
-        <span class="cor-tab" tab-title="Robot Accounts" tab-target="#robots">
+        <span class="cor-tab" tab-title="Robot Accounts" tab-init="showRobots()" tab-target="#robots">
           <i class="fa fa-wrench"></i>
         </span>
         <span class="cor-tab" tab-title="User Settings" tab-target="#settings">
@@ -60,7 +60,7 @@
 
         <!-- Robot Accounts -->
         <div id="robots" class="tab-pane">
-          <div class="robots-manager" user="viewuser"></div>
+          <div class="robots-manager" user="viewuser" is-enabled="showRobotsCounter"></div>
         </div>
 
         <!-- External Logins -->