display loading indicator immediately when necessary

web/static/src/ts/widgets/root.ts

@@ -41,7 +41,6 @@ interface State {
   stack: ActionStack;
   inHome: boolean;
   currentApp: MenuItem | null;
-  isLoading: boolean;
 }
 
 //------------------------------------------------------------------------------
@@ -56,8 +55,7 @@ export class Root extends Widget<Props, State> {
     notifications: [],
     stack: [],
     inHome: false,
-    currentApp: null,
-    isLoading: false
+    currentApp: null
   };
 
   constructor(env: Env, props: Props) {
@@ -77,7 +75,8 @@ export class Root extends Widget<Props, State> {
 
     // loading indicator
     this.env.ajax.on("rpc_status", this, status => {
-      this.updateState({ isLoading: status === "loading" });
+      const method = status === "loading" ? "remove" : "add";
+      (<any>this.refs.loading_indicator).classList[method]("d-none");
     });
 
     // actions

web/static/src/xml/templates.xml

@@ -14,7 +14,7 @@
         <t t-widget="Notification" t-props="notif"/>
       </t>
     </div>
-    <div class="o_loading" t-if="state.isLoading">Loading</div>
+    <div class="o_loading d-none" t-ref="loading_indicator">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,7 +31,7 @@ exports[`can be rendered (in home menu) 1`] = `
     <div class=\\"o_notification_container\\">
       
     </div>
-    
+    <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;
 
@@ -107,7 +107,7 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
     <div class=\\"o_notification_container\\">
       
     </div>
-    
+    <div class=\\"o_loading\\">Loading</div>
   </div>"
 `;
 
@@ -174,6 +174,6 @@ exports[`start with no action => clicks on client action => discuss is rendered
     <div class=\\"o_notification_container\\">
       
     </div>
-    
+    <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;