From e98ab85f159cbb588ee94b56037b7370a6cf85ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sun, 4 Oct 2020 00:39:12 +0200
Subject: [PATCH] Animate processing dots

issue9619
review304291002
---
 src/common.js | 12 +++++++++---
 src/sao.less  | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/common.js b/src/common.js
index 9bf56c62e9..a94479daf4 100644
--- a/src/common.js
+++ b/src/common.js
@@ -3269,10 +3269,16 @@
                 'id': 'processing',
                 'class': 'text-center'
             });
-            this.el.append(jQuery('<span/>', {
+            var label = jQuery('<span/>', {
                 'class': 'label label-info',
-                'text': Sao.i18n.gettext('Processing...')
-            }));
+                'text': Sao.i18n.gettext('Processing'),
+            }).appendTo(this.el);
+            for (var i = 0; i < 3; i ++) {
+                label.append(jQuery('<span/>', {
+                    'class': 'dot',
+                    'text': '.',
+                }));
+            }
             this.el.hide();
             jQuery(function() {
                 this.el.appendTo('body');
diff --git a/src/sao.less b/src/sao.less
index b2398ca135..0a66690e50 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -839,11 +839,28 @@ input.column-boolean {
     }
 }
 
+@keyframes blink {
+    50% {
+        color: transparent;
+    }
+}
+
 #processing {
     position: fixed;
     top: 0px;
     width: 100%;
     z-index: 2000;
+
+    .dot {
+        animation: 1s blink infinite;
+
+        &:nth-child(2) {
+            animation-delay: 250ms;
+        }
+        &:nth-child(3) {
+            animation-delay: 500ms;
+        }
+    }
 }
 
 .scrollbar {