add loading message to mail and contacts list

roundcube · Jun 4, 2023 · f999836 · f999836
1 parent 5723849
commit f999836
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
@@ -50,8 +50,8 @@ <h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod"
 	<div class="scroller">
 		<h2 id="aria-label-contactslist" class="voice"><roundcube:label name="contacts" /></h2>
 		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
-			noheader="true" role="listbox" data-list="contact_list"
-			data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
+			noheader="true" role="listbox" data-list="contact_list" data-label-msg-empty="listempty"
+			data-label-msg-loading="loading" data-label-ext="listusebutton" data-create-command="add" />
 	</div>
 	<roundcube:include file="includes/pagenav.html" />
 </div>

diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html
@@ -102,7 +102,8 @@ <h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod"
 	<div id="messagelist-content" class="scroller" tabindex="-1">
 		<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
 		<roundcube:object name="messages" id="messagelist" class="listing messagelist sortheader fixedheader"
-			aria-labelledby="aria-label-messagelist" data-list="message_list" data-label-msg="listempty"
+			aria-labelledby="aria-label-messagelist" data-list="message_list" data-label-msg-empty="listempty"
+			data-label-msg-loading="loading"
 		/>
 	</div>
 	<roundcube:include file="includes/pagenav.html" />

diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
@@ -605,16 +605,22 @@ function rcube_elastic_ui()
 
         // Display "List is empty..." on the list
         if (window.MutationObserver) {
-            $('[data-label-msg]').filter('ul,table').each(function() {
+            $('[data-label-msg],[data-label-msg-loading],[data-label-empty]').filter('ul,table').each(function() {
                 var info = $('<div class="listing-info hidden">').insertAfter(this),
                     table = $(this),
                     fn = function() {
-                        var ext, command,
-                            msg = table.data('label-msg'),
+                        var ext, command, msg,
                             list = table.is('ul') ? table : table.children('tbody');
 
-                        if (!rcmail.env.search_request && !rcmail.env.qsearch
-                            && msg && !list.children(':visible').length
+                        if (rcmail.busy && table.data('label-msg-loading')) {
+                            msg = table.data('label-msg-loading');
+                            setTimeout(callback, 250);
+                        }
+                        else {
+                            msg = table.data('label-msg-empty') ? table.data('label-msg-empty') : table.data('label-msg');
+                        }
+
+                        if (msg && !list.children(':visible').length
                         ) {
                             ext = table.data('label-ext');
                             command = table.data('create-command');
@@ -631,7 +637,7 @@ function rcube_elastic_ui()
                     },
                     callback = function() {
                         // wait until the UI stops loading and the list is visible
-                        if (rcmail.busy || !table.is(':visible')) {
+                        if (!table.is(':visible')) {
                             return setTimeout(callback, 250);
                         }