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

From: Daniel Henrique Barboza <danielhb(a)linux.vnet.ibm.com&gt; 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(a)linux.vnet.ibm.com&gt; --- 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}">