Change the repo view page to minimize the number of API calls necessary until such time as the information is needed (lazy load everything). Also increase the build timer to 30s.

static/directives/repo-view/repo-panel-settings.html

@@ -5,7 +5,8 @@
     <div class="co-panel">
       <div class="co-panel-heading"><i class="fa fa-key"></i> User and Robot Permissions</div>
       <div class="panel-body" style="padding-top: 5px;">
-        <div class="repository-permissions-table" repository="repository"></div>
+        <div class="repository-permissions-table" repository="repository"
+             is-enabled="isEnabled"></div>
       </div>
     </div>
 
@@ -13,12 +14,13 @@
     <div class="co-panel" ng-show="hasTokens">
       <div class="co-panel-heading"><i class="fa fa-key"></i> Access Token Permissions</div>
       <div class="panel-body" style="padding-top: 5px;">
-        <div class="repository-tokens-table" repository="repository" has-tokens="hasTokens"></div>
+        <div class="repository-tokens-table" repository="repository" has-tokens="hasTokens" is-enabled="isEnabled"></div>
       </div>
     </div>
 
     <!-- Events and Notifications -->
-    <div class="repository-events-table" repository="repository"></div>
+    <div class="repository-events-table" repository="repository"
+         is-enabled="isEnabled"></div>
 
     <!-- Other settings -->
     <div class="co-panel">

static/js/directives/repo-view/repo-panel-builds.js

@@ -10,7 +10,8 @@ angular.module('quay').directive('repoPanelBuilds', function () {
     restrict: 'C',
     scope: {
       'repository': '=repository',
-      'builds': '=builds'
+      'builds': '=builds',
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, $filter, $routeParams, ApiService, TriggerService, UserService) {
       var orderBy = $filter('orderBy');
@@ -58,7 +59,7 @@ angular.module('quay').directive('repoPanelBuilds', function () {
       };
 
       var loadBuilds = function(opt_forcerefresh) {
-        if (!$scope.builds || !$scope.repository || !$scope.options.filter) {
+        if (!$scope.builds || !$scope.repository || !$scope.options.filter || !$scope.isEnabled) {
           return;
         }
 
@@ -101,7 +102,7 @@ angular.module('quay').directive('repoPanelBuilds', function () {
           return;
         }
 
-        if (!$scope.builds || !$scope.repository) {
+        if (!$scope.builds || !$scope.repository || !$scope.isEnabled) {
           return;
         }
 
@@ -133,7 +134,7 @@ angular.module('quay').directive('repoPanelBuilds', function () {
       };
 
       var loadBuildTriggers = function() {
-        if (!$scope.repository || !$scope.repository.can_admin) { return; }
+        if (!$scope.repository || !$scope.repository.can_admin || !$scope.isEnabled) { return; }
 
         var params = {
           'repository': $scope.repository.namespace + '/' + $scope.repository.name
@@ -157,6 +158,9 @@ angular.module('quay').directive('repoPanelBuilds', function () {
       $scope.$watch('repository', loadBuildTriggers);
       $scope.$watch('repository', loadBuilds);
 
+      $scope.$watch('isEnabled', loadBuildTriggers);
+      $scope.$watch('isEnabled', loadBuilds);
+
       $scope.$watch('builds', buildsChanged);
 
       $scope.$watch('options.filter', loadBuilds);

static/js/directives/repo-view/repo-panel-settings.js

@@ -9,7 +9,8 @@ angular.module('quay').directive('repoPanelSettings', function () {
     transclude: false,
     restrict: 'C',
     scope: {
-      'repository': '=repository'
+      'repository': '=repository',
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, ApiService, Config) {
       $scope.getBadgeFormat = function(format, repository) {

static/js/directives/ui/repository-events-table.js

@@ -10,13 +10,15 @@ angular.module('quay').directive('repositoryEventsTable', function () {
     transclude: true,
     restrict: 'C',
     scope: {
-      'repository': '=repository'
+      'repository': '=repository',
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, ApiService, Restangular, UtilService, ExternalNotificationData) {
       $scope.showNewNotificationCounter = 0;
 
       var loadNotifications = function() {
-        if (!$scope.repository || $scope.notificationsResource) { return; }
+        if (!$scope.repository || $scope.notificationsResource || !$scope.isEnabled) { return; }
+
         var params = {
           'repository': $scope.repository.namespace + '/' + $scope.repository.name
         };
@@ -29,6 +31,8 @@ angular.module('quay').directive('repositoryEventsTable', function () {
       };
 
       $scope.$watch('repository', loadNotifications);
+      $scope.$watch('isEnabled', loadNotifications);
+
       loadNotifications();
 
       $scope.handleNotificationCreated = function(notification) {

static/js/directives/ui/repository-permissions-table.js

@@ -25,7 +25,8 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
     transclude: true,
     restrict: 'C',
     scope: {
-      'repository': '=repository'
+      'repository': '=repository',
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, ApiService, Restangular, UtilService) {
       $scope.permissionResources = {'team': {}, 'user': {}};
@@ -34,7 +35,8 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
       $scope.addPermissionInfo = {};
 
       var loadAllPermissions = function() {
-        if (!$scope.repository) { return; }
+        if (!$scope.repository || !$scope.isEnabled) { return; }
+
         fetchPermissions('user');
         fetchPermissions('team');
       };
@@ -58,6 +60,8 @@ angular.module('quay').directive('repositoryPermissionsTable', function () {
       };
 
       $scope.$watch('repository', loadAllPermissions);
+      $scope.$watch('isEnabled', loadAllPermissions);
+
       loadAllPermissions();
 
       var getPermissionEndpoint = function(entityName, kind) {

static/js/directives/ui/repository-tokens-table.js

@@ -11,13 +11,14 @@ angular.module('quay').directive('repositoryTokensTable', function () {
     restrict: 'C',
     scope: {
       'repository': '=repository',
-      'hasTokens': '=hasTokens'
+      'hasTokens': '=hasTokens',
+      'isEnabled': '=isEnabled'
     },
     controller: function($scope, $element, ApiService, Restangular, UtilService) {
       $scope.hasTokens = false;
 
       var loadTokens = function() {
-        if (!$scope.repository || $scope.tokensResource) { return; }
+        if (!$scope.repository || $scope.tokensResource || !$scope.isEnabled) { return; }
         var params = {
           'repository': $scope.repository.namespace + '/' + $scope.repository.name
         };
@@ -28,7 +29,9 @@ angular.module('quay').directive('repositoryTokensTable', function () {
         }, ApiService.errorDisplay('Could not load access tokens'));
       };
 
+      $scope.$watch('isEnabled', loadTokens);
       $scope.$watch('repository', loadTokens);
+
       loadTokens();
 
       $scope.deleteToken = function(tokenCode) {

static/js/pages/repo-view.js

@@ -17,7 +17,13 @@
     $scope.namespace = $routeParams.namespace;
     $scope.name = $routeParams.name;
 
+    $scope.imagesRequired = false;
+
+    // Tab-enabled counters.
     $scope.logsShown = 0;
+    $scope.buildsShown = 0;
+    $scope.settingsShown = 0;
+
     $scope.viewScope = {
       'selectedTags': [],
       'repository': null,
@@ -72,11 +78,17 @@
           $scope.setTags($routeParams.tag);
 
           // Load the images.
-          loadImages();
+          if ($scope.imagesRequired) {
+            loadImages();
+          }
 
           // Track builds.
-          buildPollChannel = AngularPollChannel.create($scope, loadRepositoryBuilds, 15000 /* 15s */);
+          if (!$scope.repository.is_building) {
-          buildPollChannel.start();
+            $scope.viewScope.builds = [];
+          }
+
+          buildPollChannel = AngularPollChannel.create($scope, loadRepositoryBuilds, 30000 /* 30s */);
+          buildPollChannel.start(!$scope.repository.is_building);
         }, 10);
       });
     };
@@ -139,10 +151,28 @@
       $scope.viewScope.selectedTags = $.unique(tagNames.split(','));
     };
 
+    $scope.showBuilds = function() {
+      $scope.buildsShown++;
+    };
+
+    $scope.showSettings = function() {
+      $scope.settingsShown++;
+    };
+
     $scope.showLogs = function() {
       $scope.logsShown++;
     };
 
+    $scope.requireImages = function() {
+      // Lazily load the repo's images if this is the first call to a tab
+      // that needs the images.
+      if (!$scope.imagesRequired) {
+        loadImages();
+      }
+
+      $scope.imagesRequired = true;
+    };
+
     $scope.handleChangesState = function(value) {
       $scope.viewScope.changesVisible = value;
     };

static/js/services/angular-poll-channel.js

@@ -17,6 +17,12 @@ angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout',
     });
   };
 
+  _PollChannel.prototype.setSleepTime = function(sleepTime) {
+    this.sleeptime_ = sleepTime;
+    this.stop();
+    this.start(true);
+  };
+
   _PollChannel.prototype.stop = function() {
     if (this.timer_) {
       $timeout.cancel(this.timer_);
@@ -27,11 +33,18 @@ angular.module('quay').factory('AngularPollChannel', ['ApiService', '$timeout',
     this.working = false;
   };
 
-  _PollChannel.prototype.start = function() {
+  _PollChannel.prototype.start = function(opt_skipFirstCall) {
     // Make sure we invoke call outside the normal digest cycle, since
     // we'll call $scope.$apply ourselves.
     var that = this;
-    setTimeout(function() { that.call_(); }, 0);
+    setTimeout(function() {
+      if (opt_skipFirstCall) {
+        that.setupTimer_();
+        return;
+      }
+
+      that.call_();
+    }, 0);
   };
 
   _PollChannel.prototype.call_ = function() {

static/partials/repo-view.html

@@ -21,17 +21,21 @@
           <i class="fa fa-info-circle"></i>
         </span>
 
-        <span class="cor-tab" tab-title="Tags" tab-target="#tags">
+        <span class="cor-tab" tab-title="Tags" tab-target="#tags"
+              tab-init="requireImages()">
           <i class="fa fa-tags"></i>
         </span>
 
         <span class="cor-tab" tab-title="Builds" tab-target="#builds"
+              tab-init="showBuilds()"
               quay-show="viewScope.repository.can_write && Features.BUILD_SUPPORT">
           <i class="fa fa-tasks"></i>
         </span>
 
         <span class="cor-tab" tab-title="Visualize" tab-target="#changes"
-              tab-shown="handleChangesState(true)" tab-hidden="handleChangesState(false)">
+              tab-shown="handleChangesState(true)"
+              tab-hidden="handleChangesState(false)"
+              tab-init="requireImages()">
           <i class="fa fa-code-fork"></i>
         </span>
 
@@ -42,6 +46,7 @@
         </span>
 
         <span class="cor-tab" tab-title="Settings" tab-target="#settings"
+              tab-init="showSettings()"
               ng-show="viewScope.repository.can_admin">
           <i class="fa fa-gear"></i>
         </span>
@@ -68,7 +73,8 @@
         <div id="builds" class="tab-pane">
           <div class="repo-panel-builds"
                repository="viewScope.repository"
-               builds="viewScope.builds"></div>
+               builds="viewScope.builds"
+               is-enabled="buildsShown"></div>
         </div>
 
         <!-- Changes -->
@@ -88,7 +94,8 @@
 
         <!-- Settings -->
         <div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin">
-          <div class="repo-panel-settings" repository="viewScope.repository"></div>
+          <div class="repo-panel-settings" repository="viewScope.repository"
+               is-enabled="settingsShown"></div>
         </div>
       </div> <!-- /cor-tab-content -->
     </div>