From 8d94c69223964523782772c65353f00bca7f47d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Wed, 6 Feb 2019 21:20:26 +0100
Subject: [PATCH] add loading indicator

---
 web/static/src/scss/app.scss                         | 12 ++++++++++++
 web/static/src/ts/widgets/root.ts                    |  9 ++++++++-
 web/static/src/xml/templates.xml                     |  1 +
 .../tests/widgets/__snapshots__/root.test.ts.snap    |  3 +++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/web/static/src/scss/app.scss b/web/static/src/scss/app.scss
index be280d04..e204fda5 100644
--- a/web/static/src/scss/app.scss
+++ b/web/static/src/scss/app.scss
@@ -187,3 +187,15 @@ body {
     padding: 5px;
   }
 }
+
+/***** Loading indicator *****/
+.o_loading {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 1051; // lol...
+  background-color: $main-color;
+  color: white;
+  padding: 4px;
+  font-size: 14px;
+}
diff --git a/web/static/src/ts/widgets/root.ts b/web/static/src/ts/widgets/root.ts
index 59ea343e..919867c8 100644
--- a/web/static/src/ts/widgets/root.ts
+++ b/web/static/src/ts/widgets/root.ts
@@ -41,6 +41,7 @@ interface State {
   stack: ActionStack;
   inHome: boolean;
   currentApp: MenuItem | null;
+  isLoading: boolean;
 }
 
 //------------------------------------------------------------------------------
@@ -55,7 +56,8 @@ export class Root extends Widget<Props, State> {
     notifications: [],
     stack: [],
     inHome: false,
-    currentApp: null
+    currentApp: null,
+    isLoading: false
   };
 
   constructor(env: Env, props: Props) {
@@ -73,6 +75,11 @@ export class Root extends Widget<Props, State> {
       this.updateState({ notifications: notifs })
     );
 
+    // loading indicator
+    this.env.ajax.on("rpc_status", this, status => {
+      this.updateState({ isLoading: status === "loading" });
+    });
+
     // actions
     this.env.actionManager.on("action_stack_updated", this, stack =>
       this.updateState({ stack, inHome: false })
diff --git a/web/static/src/xml/templates.xml b/web/static/src/xml/templates.xml
index 12a6d4bd..98cb856b 100644
--- a/web/static/src/xml/templates.xml
+++ b/web/static/src/xml/templates.xml
@@ -14,6 +14,7 @@
         <t t-widget="Notification" t-props="notif"/>
       </t>
     </div>
+    <div class="o_loading" t-if="state.isLoading">Loading</div>
   </div>
 
   <div t-name="web.navbar" class="o_navbar" t-att-class="props.inHome ? 'o_navbar o_in_home' : 'o_navbar'">
diff --git a/web/static/tests/widgets/__snapshots__/root.test.ts.snap b/web/static/tests/widgets/__snapshots__/root.test.ts.snap
index 552f6cc1..b6fc733e 100644
--- a/web/static/tests/widgets/__snapshots__/root.test.ts.snap
+++ b/web/static/tests/widgets/__snapshots__/root.test.ts.snap
@@ -31,6 +31,7 @@ exports[`can be rendered (in home menu) 1`] = `
     <div class=\\"o_notification_container\\">
       
     </div>
+    
   </div>"
 `;
 
@@ -106,6 +107,7 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
     <div class=\\"o_notification_container\\">
       
     </div>
+    
   </div>"
 `;
 
@@ -172,5 +174,6 @@ exports[`start with no action => clicks on client action => discuss is rendered
     <div class=\\"o_notification_container\\">
       
     </div>
+    
   </div>"
 `;