Make images loaded lazily on the repo tags page, as they will not be needed in the read-only (common) case.

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

@@ -13,6 +13,8 @@ angular.module('quay').directive('repoPanelTags', function () {
       'selectedTags': '=selectedTags',
       'imagesResource': '=imagesResource',
       'images': '=images',
+
+      'getImages': '&getImages'
     },
     controller: function($scope, $element, $filter, $location, ApiService, UIService) {
       var orderBy = $filter('orderBy');

static/js/directives/ui/tag-operations-dialog.js

@@ -14,10 +14,17 @@ angular.module('quay').directive('tagOperationsDialog', function () {
       'images': '=images',
       'actionHandler': '=actionHandler',
 
+      'getImages': '&getImages',
       'tagChanged': '&tagChanged'
     },
     controller: function($scope, $element, $timeout, ApiService) {
       $scope.addingTag = false;
+      $scope.imagesInternal = [];
+
+      $scope.$watch('images', function(images) {
+        if (!images) { return; }
+        $scope.imagesInternal = images;
+      });
 
       var markChanged = function(added, removed) {
         // Reload the repository and the images.
@@ -142,39 +149,70 @@ angular.module('quay').directive('tagOperationsDialog', function () {
         }, errorHandler);
       };
 
+      var lazyLoadImages = function(callback) {
+        if ($scope.imagesInternal.length) {
+          callback();
+          return;
+        }
+
+        var isLoading = true;
+        $timeout(function() {
+          if (isLoading) {
+            $('#loadingImagesModal').modal({});
+          }
+        }, 500);
+
+        var cb = function(images) {
+          isLoading = false;
+          $('#loadingImagesModal').modal('hide');
+          $scope.imagesInternal = images;
+          callback();
+        };
+
+        $scope.getImages({'callback': cb});
+      };
+
       $scope.actionHandler = {
         'askDeleteTag': function(tag) {
-          $scope.deleteTagInfo = {
-            'tag': tag
-          };
+          lazyLoadImages(function() {
+            $scope.deleteTagInfo = {
+              'tag': tag
+            };
+          });
         },
 
         'askDeleteMultipleTags': function(tags) {
-          $scope.deleteMultipleTagsInfo = {
-            'tags': tags
-          };
+          lazyLoadImages(function() {
+            $scope.deleteMultipleTagsInfo = {
+              'tags': tags
+            };
+          });
         },
 
         'askAddTag': function(image) {
-          $scope.tagToCreate = '';
-          $scope.toTagImage = image;
-          $scope.addingTag = false;
-          $scope.addTagForm.$setPristine();
-          $element.find('#createOrMoveTagModal').modal('show');
+          lazyLoadImages(function() {
+            $scope.tagToCreate = '';
+            $scope.toTagImage = image;
+            $scope.addingTag = false;
+            $scope.addTagForm.$setPristine();
+            $element.find('#createOrMoveTagModal').modal('show');
+          });
         },
 
         'askRevertTag': function(tag, image_id) {
-          if (tag.image_id == image_id) {
-            bootbox.alert('This is the current image for the tag');
-            return;
-          }
+          lazyLoadImages(function() {
+            if (tag.image_id == image_id) {
+              bootbox.alert('This is the current image for the tag');
+              return;
+            }
 
-          $scope.revertTagInfo = {
-            'tag': tag,
-            'image_id': image_id
-          };
+            $scope.revertTagInfo = {
+              'tag': tag,
+              'image_id': image_id
+            };
 
-          $element.find('#revertTagModal').modal('show');
+            $element.find('#revertTagModal').modal('show');
+          });
         }
       };
     }

static/js/pages/repo-view.js

@@ -64,6 +64,9 @@
     };
 
     var loadRepository = function() {
+      // Mark the images to be reloaded.
+      $scope.viewScope.images = null;
+
       var params = {
         'repository': $scope.namespace + '/' + $scope.name
       };
@@ -77,11 +80,6 @@
         $timeout(function() {
           $scope.setTags($routeParams.tag);
 
-          // Load the images.
-          if ($scope.imagesRequired) {
-            loadImages();
-          }
-
           // Track builds.
           if (!$scope.repository.is_building) {
             $scope.viewScope.builds = [];
@@ -93,13 +91,14 @@
       });
     };
 
-    var loadImages = function() {
+    var loadImages = function(opt_callback) {
       var params = {
         'repository': $scope.namespace + '/' + $scope.name
       };
 
       $scope.viewScope.imagesResource = ApiService.listRepositoryImagesAsResource(params).get(function(resp) {
         $scope.viewScope.images = resp.images;
+        opt_callback && opt_callback(resp.images);
       });
     };
 
@@ -166,16 +165,18 @@
     $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) {
+      if ($scope.viewScope.images == null) {
         loadImages();
       }
-
-      $scope.imagesRequired = true;
     };
 
     $scope.handleChangesState = function(value) {
       $scope.viewScope.changesVisible = value;
     };
+
+    $scope.getImages = function(callback) {
+      loadImages(callback);
+    };
   }
 
   function OldRepoViewCtrl($scope, $sanitize, Restangular, ImageMetadataService, ApiService, $routeParams, $rootScope, $location, $timeout, Config, UtilService) {