[Kimchi-devel] [PATCH] Insert loading icon in Storage tab

[Daniel Barboza]

From: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>

Due to the timeout period to see if the NFS pool is
online, the Storage tab may look irresponsible and
the user might believe that the UI/kimchi is frozen.

Inserting the loading icon+text in this tab to show that
the UI is responsive, just waiting for an answer from the
server.

Signed-off-by: Daniel Henrique Barboza <danielhb at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.storage_main.js | 2 ++
 ui/pages/tabs/storage.html.tmpl  | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 6052510..74e6892 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -17,6 +17,7 @@
  */
 kimchi.doListStoragePools = function() {
     kimchi.listStoragePools(function(result) {
+        $('#storagepoolsLoading').addClass('hidden');
         var storageHtml = $('#storageTmpl').html();
         if (result && result.length) {
             var listHtml = '';
@@ -34,6 +35,7 @@ kimchi.doListStoragePools = function() {
             $('#storagepoolsList').html('');
         }
     }, function(err) {
+        $('#storagepoolsLoading').addClass('hidden');
         kimchi.message.error(err.responseJSON.reason);
     });
 
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index c3a992e..84372c1 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -40,7 +40,13 @@
         <li class="title-actions">$_("Actions")</li>
     </div>
     <ul id="storagepoolsList" class="list-storage empty-when-logged-off"></ul>
-</div>
+    <div id="storagepoolsLoading">
+        <div class="grid-loading">
+            <div class="grid-loading-icon"></div>
+                <div class="grid-loading-text">$_("loading")</div>
+            </div>
+        </div> 
+    </div>
 <script id="storageTmpl" type="html/text">
     <li id="{name}">
         <div class="storage-li in" data-name="{name}" data-stat="{state}">
-- 
1.8.3.1