[IMP] runbot: move loading state above chart

Instead of having the spinner in the configuration section, display it
as an overlay over the chart.

runbot/static/src/stats/stats.scss

@@ -32,3 +32,7 @@
         padding: 0;
     }
 }
+
+.o_runbot_stat_chart_backdrop {
+    backdrop-filter: blur(2px);
+}

runbot/static/src/stats/stats_chart.js

@@ -20,6 +20,7 @@ export class StatsChart extends Component {
         this.config = useConfig();
         this.canvas = useRef('canvas');
         this.state = useState({
+            loading: false,
             data: {},
         });
         this.chartConfig = useState({
@@ -84,8 +85,7 @@ export class StatsChart extends Component {
      * on the debounced _fetchStat.
      */
     fetchStats() {
-        this.loading = true;
-        this.env.bus.trigger('start-loading', {});
+        this.state.loading = true;
         this._fetchStats(); // debounced
     }
 
@@ -106,7 +106,7 @@ export class StatsChart extends Component {
             },
         });
         this.state.data = (await result.json()).result;
-        this.env.bus.trigger('stop-loading', {});
+        this.state.loading = false;
     }
 
     /**

runbot/static/src/stats/stats_chart.xml

@@ -2,7 +2,14 @@
 <odoo>
   <t t-name="runbot.StatsChart">
     <div class="row">
-      <div class="col-xs-9 col-md-10"><canvas t-ref="canvas"/></div>
+      <div class="col-xs-9 col-md-10">
+        <div class="position-relative">
+          <div t-if="state.loading" class="o_runbot_stat_chart_backdrop position-absolute h-100 w-100 text-center align-content-center">
+            <i class="fa fa-2x fa-circle-o-notch fa-spin"/>
+          </div>
+          <canvas t-ref="canvas"/>
+        </div>
+      </div>
       <div class="col-xs-3 col-md-2">
         <b>Mode:</b>
         <select class="form-select" aria-label="Display Mode" t-model="config.mode">

runbot/static/src/stats/stats_config.js

@@ -41,13 +41,7 @@ export class StatsConfig extends Component {
     };
 
     setup() {
-        this.state = useState({
-            loading: true,
-        })
         this.config = useConfig();
-
-        useBus(this.env.bus, 'start-loading', () => this.state.loading = true);
-        useBus(this.env.bus, 'stop-loading', () => this.state.loading = false);
     }
 
     onClickPrevious() {

runbot/static/src/stats/stats_config.xml

@@ -34,7 +34,6 @@
           <i t-attf-class="fa fa-fast-forward"/>
         </button>
         <p>Tips: click a bullet to see corresponding build stats, shift+click to center the graph on this build</p>
-        <i t-if="state.loading" class="fa fa-2x fa-circle-o-notch fa-spin"/>
       </div>
     </nav>
   </t>