add loading indicator

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;
+}

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 })

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'">

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>"
 `;