From 4ee8e9f718e9d892e787dc4abed4c72f0d041e9f Mon Sep 17 00:00:00 2001
From: Daniel Dourvaris <daniel@rhodecode.com>
Date: Fri, 10 Jan 2020 13:06:16 +0100
Subject: [PATCH] main-page: fixed jumping of text in grid loading.

- new logic starts with everything hidden and global loading marker
- show only those grida that contain data.
---
 rhodecode/public/css/tables.less    | 11 ++++++
 rhodecode/templates/index_base.mako | 58 ++++++++++++++++-------------
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/rhodecode/public/css/tables.less b/rhodecode/public/css/tables.less
index df255087..3b22e421 100644
--- a/rhodecode/public/css/tables.less
+++ b/rhodecode/public/css/tables.less
@@ -373,6 +373,17 @@ table#repo_list_table {
     min-width: 600px;
 }
 
+#no_grid_data {
+    text-align: center;
+}
+
+#grid_data_loading {
+    text-align: center;
+    font-weight: 600;
+    font-size: 16px;
+    padding: 80px 20px;
+}
+
 // Keyboard mappings
 table.keyboard-mappings {
     th {
diff --git a/rhodecode/templates/index_base.mako b/rhodecode/templates/index_base.mako
index 4c53f24b..ffa06714 100644
--- a/rhodecode/templates/index_base.mako
+++ b/rhodecode/templates/index_base.mako
@@ -14,32 +14,50 @@
         <div class="title">
 
         </div>
+
         <!-- end box / title -->
         <div id="no_grid_data" class="table" style="display: none">
-            <h2 class="no-object-border">
+            <h2>
                  ${_('No repositories or repositories groups exists here.')}
             </h2>
         </div>
 
+        <div id="grid_data_loading" class="table" style="display: none">
+            <i class="icon-spin animate-spin"></i>
+            ${_('loading...')}
+        </div>
+
         <div class="table">
-            <div id="groups_list_wrap" style="min-height: 200px;">
+            <div id="groups_list_wrap" style="min-height: 200px;display: none">
                 <table id="group_list_table" class="display" style="width: 100%;"></table>
             </div>
         </div>
 
         <div class="table">
-            <div id="repos_list_wrap" style="min-height: 200px;">
+            <div id="repos_list_wrap" style="min-height: 200px;display: none">
                 <table id="repo_list_table" class="display" style="width: 100%;"></table>
             </div>
         </div>
 
     </div>
+
     <script>
     $(document).ready(function () {
+        var noRepoData = null;
+        var noGroupData = null;
+        var $gridDataLoading = $('#grid_data_loading');
 
-        // repo group list
+        // global show loading of hidden grids
+        $(document).on('preInit.dt', function (e, settings) {
+            $gridDataLoading.show();
+        });
+
+        ## repo group list
         var $groupListTable = $('#group_list_table');
 
+        $groupListTable.on('xhr.dt', function (e, settings, json, xhr) {
+            $gridDataLoading.hide();
+        });
         $groupListTable.DataTable({
             processing: true,
             serverSide: true,
@@ -97,11 +115,12 @@
                 emptyTable: _gettext("No repository groups present.")
             },
             "drawCallback": function (settings, json) {
+
                 // hide grid if it's empty
                 if (settings.fnRecordsDisplay() === 0) {
-                    $('#groups_list_wrap').hide();
+                    noGroupData = true;
                     // both hidden, show no-data
-                    if ($('#repos_list_wrap').is(':hidden')) {
+                    if (noRepoData === true) {
                         $('#no_grid_data').show();
                     }
                 } else {
@@ -119,18 +138,13 @@
             },
         });
 
-        $groupListTable.on('xhr.dt', function (e, settings, json, xhr) {
-            $groupListTable.css('opacity', 1);
-        });
 
-        $groupListTable.on('preXhr.dt', function (e, settings, data) {
-            $groupListTable.css('opacity', 0.3);
-        });
-
-
-        ##  // repo list
+        ##  repo list
         var $repoListTable = $('#repo_list_table');
 
+        $repoListTable.on('xhr.dt', function (e, settings, json, xhr) {
+            $gridDataLoading.hide();
+        });
         $repoListTable.DataTable({
             processing: true,
             serverSide: true,
@@ -188,11 +202,13 @@
                 emptyTable: _gettext("No repositories present.")
             },
             "drawCallback": function (settings, json) {
+
                 // hide grid if it's empty
                 if (settings.fnRecordsDisplay() == 0) {
-                    $('#repos_list_wrap').hide()
+                    noRepoData = true;
+
                     // both hidden, show no-data
-                    if ($('#groups_list_wrap').is(':hidden')) {
+                    if (noGroupData === true) {
                         $('#no_grid_data').show()
                     }
                 } else {
@@ -210,14 +226,6 @@
             },
         });
 
-        $repoListTable.on('xhr.dt', function (e, settings, json, xhr) {
-            $repoListTable.css('opacity', 1);
-        });
-
-        $repoListTable.on('preXhr.dt', function (e, settings, data) {
-            $repoListTable.css('opacity', 0.3);
-        });
-
     });
     </script>
 </%def>