From ede99367221e6be28b9be2f7e175aef4cc5ce067 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Wed, 22 Jul 2015 16:59:31 -0400
Subject: [PATCH] Add a proper throbber to the repo list table

---
 static/directives/repo-list-table.html     | 5 +++--
 static/js/directives/ui/repo-list-table.js | 5 +++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/static/directives/repo-list-table.html b/static/directives/repo-list-table.html
index 894f8572f..8b4d266fc 100644
--- a/static/directives/repo-list-table.html
+++ b/static/directives/repo-list-table.html
@@ -1,10 +1,11 @@
 <div class="repo-list-table-element">
-  <div ng-if="orderedRepositories.length== 0">
+  <div class="cor-loader" ng-if="isLoading"></div>
+  <div ng-if="orderedRepositories.length == 0 && !isLoading">
     <div class="empty-primary-msg">You do not have any viewable repositories.</div>
     <div class="empty-secondary-msg">Either no repositories exist yet or you may not have permission to view any. If you have permission, try <a href="/new">creating a new repository</a>.</div>
   </div>
 
-  <table class="co-table" ng-if="orderedRepositories.length">
+  <table class="co-table" ng-if="orderedRepositories.length && !isLoading">
    <thead>
     <td class="hidden-xs"
         ng-class="tablePredicateClass('full_name', options.predicate, options.reverse)">
diff --git a/static/js/directives/ui/repo-list-table.js b/static/js/directives/ui/repo-list-table.js
index b7dfe7677..c19a22371 100644
--- a/static/js/directives/ui/repo-list-table.js
+++ b/static/js/directives/ui/repo-list-table.js
@@ -81,8 +81,13 @@ angular.module('quay').directive('repoListTable', function () {
       $scope.$watch('repositoriesResources', function(resources) {
         $scope.repositories = [];
         $scope.maxPopularity = 0;
+        $scope.isLoading = false;
 
         resources.forEach(function(resource) {
+          if (resource.loading) {
+            $scope.isLoading = true;
+          }
+
           (resource.value || []).forEach(function(repository) {
             var repositoryInfo = $.extend(repository, {
               'full_name': repository.namespace + '/' + repository.name,