From cd70f5f0c1a3f7ece371c825761c4e6533b36e4e Mon Sep 17 00:00:00 2001
From: William Braeckman <wbr@odoo.com>
Date: Fri, 10 Jan 2025 09:35:16 +0100
Subject: [PATCH] [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       | 4 ++++
 runbot/static/src/stats/stats_chart.js   | 6 +++---
 runbot/static/src/stats/stats_chart.xml  | 9 ++++++++-
 runbot/static/src/stats/stats_config.js  | 6 ------
 runbot/static/src/stats/stats_config.xml | 1 -
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/runbot/static/src/stats/stats.scss b/runbot/static/src/stats/stats.scss
index 2cf633b03..9672e28e5 100644
--- a/runbot/static/src/stats/stats.scss
+++ b/runbot/static/src/stats/stats.scss
@@ -32,3 +32,7 @@
         padding: 0;
     }
 }
+
+.o_runbot_stat_chart_backdrop {
+    backdrop-filter: blur(2px);
+}
diff --git a/runbot/static/src/stats/stats_chart.js b/runbot/static/src/stats/stats_chart.js
index 883d65c54..481285d8f 100644
--- a/runbot/static/src/stats/stats_chart.js
+++ b/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;
     }
 
     /**
diff --git a/runbot/static/src/stats/stats_chart.xml b/runbot/static/src/stats/stats_chart.xml
index a9cbcf16c..65ecc8948 100644
--- a/runbot/static/src/stats/stats_chart.xml
+++ b/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">
diff --git a/runbot/static/src/stats/stats_config.js b/runbot/static/src/stats/stats_config.js
index 1fd04bb40..e85ca6fd6 100644
--- a/runbot/static/src/stats/stats_config.js
+++ b/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() {
diff --git a/runbot/static/src/stats/stats_config.xml b/runbot/static/src/stats/stats_config.xml
index cc7439595..277c9ad2c 100644
--- a/runbot/static/src/stats/stats_config.xml
+++ b/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>