[Kimchi-devel] [PATCH] [Kimchi 9/9] Issue 784: Display a 'loading gif' when waiting for data

[sguimaraes943 at gmail.com]

From: samhenri <samuel.guimaraes at eldorado.org.br>

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 ui/js/src/kimchi.storage_main.js |  5 +++++
 ui/pages/tabs/storage.html.tmpl  | 14 +++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ui/js/src/kimchi.storage_main.js b/ui/js/src/kimchi.storage_main.js
index 1b97307..ce83431 100644
--- a/ui/js/src/kimchi.storage_main.js
+++ b/ui/js/src/kimchi.storage_main.js
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 kimchi.doListStoragePools = function() {
+    $('.wok-mask').removeClass('hidden');
     kimchi.listStoragePools(function(result) {
         var storageHtml = $('#storageTmpl').html();
         if (result && result.length) {
@@ -46,14 +47,18 @@ kimchi.doListStoragePools = function() {
                 $('.storage-allocate').addClass('storage-allocate-padding-user');
             }
             $('#storageGrid').dataGrid({enableSorting: false});
+            $('#storageGrid').removeClass('hidden');
+            $('.wok-mask').fadeOut(300, function() {});
             $('input', $('.grid-control', '.storage')).on('keyup', function(){
                 $('#storageGrid').dataGrid('filter', $(this).val());
             });
             kimchi.storageBindClick();
         } else {
+            $('.wok-mask').fadeOut(300, function() {});
             $('#storagepoolsList').html('');
         }
     }, function(err) {
+        $('.wok-mask').fadeOut(300, function() {});
         wok.message.error(err.responseJSON.reason);
     });
 };
diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
index 9f2a978..3586ab6 100644
--- a/ui/pages/tabs/storage.html.tmpl
+++ b/ui/pages/tabs/storage.html.tmpl
@@ -34,7 +34,7 @@
             <!-- Brand and toggle get grouped for better mobile display -->
             <div class="navbar-header">
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
+                <span class="sr-only">$_("Toggle navigation")</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
@@ -43,7 +43,7 @@
             <!-- Collect the nav links, forms, and other content for toggling -->
             <div class="collapse navbar-collapse" id="toolbar">
                 <ul class="nav navbar-nav navbar-right tools" display="none">
-                    <li><a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>Add a Storage</span></a></li>
+                    <li><a id="storage-pool-add" class="btn-tool" href="javascript:void(0);"><i class="fa fa-plus-circle"></i><span>$_("Add a Storage")</span></a></li>
                 </ul>
             </div>
         </div>
@@ -57,7 +57,7 @@
                 </div>
             </div>
             <div id="alert-container"></div>
-            <div id='storageGrid'>
+            <div id='storageGrid' class="hidden">
                 <div>
                     <span class="column-state"><span class="sr-only">$_("State")</span></span><!--
                     --><span class="column-name">$_("Name")</span><!--
@@ -91,6 +91,14 @@
                   </div>
             </div>
         </div>
+        <div class="wok-mask">
+            <div class="wok-mask-loader-container">
+                <div class="wok-mask-loading">
+                    <div class="wok-mask-loading-icon"></div>
+                    <div class="wok-mask-loading-text">$_("Loading...")</div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <script id="storageTmpl" type="html/text">
-- 
1.9.3