SONAR-9605 Fix infinite spinner on project activity page

8 files changed, 52 insertions, 35 deletions

diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js
index 25247318719..4e5be7ea5db 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js
@@ -20,6 +20,7 @@
 import React from 'react';
 import moment from 'moment';
 import { isEqual, sortBy } from 'lodash';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import GraphHistory from './GraphHistory';
 import { EVENT_TYPES, getSeriesMetricType, hasHistoryData, isCustomGraph } from '../utils';
 import { translate } from '../../../helpers/l10n';
@@ -109,14 +110,14 @@ export default class GraphsHistory extends React.PureComponent {
   updateTooltip = (selectedDate /*: ?Date */) => this.setState({ selectedDate });
 
   render() {
-    const { graph, series } = this.props;
+    const { graph, loading, series } = this.props;
     const isCustom = isCustomGraph(graph);
 
-    if (this.props.loading) {
+    if (loading) {
       return (
         <div className="project-activity-graph-container">
           <div className="text-center">
-            <i className="spinner" />
+            <DeferredSpinner className="" loading={loading} />
           </div>
         </div>
       );
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js
index e6a4b4f24b2..7f69288c33d 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js
@@ -44,7 +44,7 @@ type Props = {
   changeEvent: (event: string, name: string) => Promise<*>,
   deleteAnalysis: (analysis: string) => Promise<*>,
   deleteEvent: (analysis: string, event: string) => Promise<*>,
-  loading: boolean,
+  initializing: boolean,
   project: { qualifier: string },
   query: Query,
   updateQuery: Object => void
@@ -155,7 +155,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent {
     if (this.props.analyses.length === 0 || !hasFilteredData) {
       return (
         <div className={this.props.className}>
-          {this.props.loading
+          {this.props.initializing
             ? <div className="text-center">
                 <i className="spinner" />
               </div>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js
index 717678a0561..cdc41b48e99 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js
@@ -38,7 +38,7 @@ type Props = {
   deleteAnalysis: (analysis: string) => Promise<*>,
   deleteEvent: (analysis: string, event: string) => Promise<*>,
   graphLoading: boolean,
-  loading: boolean,
+  initializing: boolean,
   project: {
     configuration?: { showHistory: boolean },
     key: string,
@@ -80,7 +80,7 @@ export default function ProjectActivityApp(props /*: Props */) {
             changeEvent={props.changeEvent}
             deleteAnalysis={props.deleteAnalysis}
             deleteEvent={props.deleteEvent}
-            loading={props.loading}
+            initializing={props.initializing}
             project={props.project}
             query={props.query}
             updateQuery={props.updateQuery}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js
index 1e212bc5f13..61e9bd077c2 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js
@@ -225,36 +225,52 @@ class ProjectActivityAppContainer extends React.PureComponent {
       this.fetchActivity(query.project, 1, 100, serializeQuery(query)),
       this.fetchMetrics(),
       this.fetchMeasuresHistory(graphMetrics)
-    ]).then(response => {
-      if (this.mounted) {
-        this.setState({
-          analyses: response[0].analyses,
-          analysesLoading: true,
-          graphLoading: false,
-          initialized: true,
-          measuresHistory: response[2],
-          metrics: response[1],
-          paging: response[0].paging
-        });
+    ]).then(
+      response => {
+        if (this.mounted) {
+          this.setState({
+            analyses: response[0].analyses,
+            analysesLoading: true,
+            graphLoading: false,
+            initialized: true,
+            measuresHistory: response[2],
+            metrics: response[1],
+            paging: response[0].paging
+          });
 
-        this.loadAllActivities(query.project).then(({ analyses, paging }) => {
-          if (this.mounted) {
-            this.setState({
-              analyses,
-              analysesLoading: false,
-              paging
-            });
-          }
-        });
+          this.loadAllActivities(query.project).then(({ analyses, paging }) => {
+            if (this.mounted) {
+              this.setState({
+                analyses,
+                analysesLoading: false,
+                paging
+              });
+            }
+          });
+        }
+      },
+      () => {
+        if (this.mounted) {
+          this.setState({ initialized: true, analysesLoading: false, graphLoading: false });
+        }
       }
-    });
+    );
   }
 
   updateGraphData = (graph /*: string */, customMetrics /*: Array<string> */) => {
     const graphMetrics = getHistoryMetrics(graph, customMetrics);
     this.setState({ graphLoading: true });
-    this.fetchMeasuresHistory(graphMetrics).then((measuresHistory /*: Array<MeasureHistory> */) =>
-      this.setState({ graphLoading: false, measuresHistory })
+    this.fetchMeasuresHistory(graphMetrics).then(
+      (measuresHistory /*: Array<MeasureHistory> */) => {
+        if (this.mounted) {
+          this.setState({ graphLoading: false, measuresHistory });
+        }
+      },
+      () => {
+        if (this.mounted) {
+          this.setState({ graphLoading: false, measuresHistory: [] });
+        }
+      }
     );
   };
 
@@ -300,7 +316,7 @@ class ProjectActivityAppContainer extends React.PureComponent {
         deleteAnalysis={this.deleteAnalysis}
         deleteEvent={this.deleteEvent}
         graphLoading={!this.state.initialized || this.state.graphLoading}
-        loading={!this.state.initialized}
+        initializing={!this.state.initialized}
         metrics={this.state.metrics}
         measuresHistory={this.state.measuresHistory}
         project={this.props.project}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js
index 099b253622c..5a62d59c1fe 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js
@@ -103,7 +103,7 @@ it('should correctly filter events', () => {
 
 it('should show a loading view instead of the graph', () => {
   expect(
-    shallow(<GraphsHistory {...DEFAULT_PROPS} loading={true} />).find('.spinner')
+    shallow(<GraphsHistory {...DEFAULT_PROPS} loading={true} />).find('DeferredSpinner')
   ).toHaveLength(1);
 });
 
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js
index c3d7833dd5d..30864a995f9 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js
@@ -77,7 +77,7 @@ const DEFAULT_PROPS = {
   changeEvent: () => {},
   deleteAnalysis: () => {},
   deleteEvent: () => {},
-  loading: false,
+  inizializing: false,
   project: { qualifier: 'TRK' },
   query: { category: '', graph: DEFAULT_GRAPH, project: 'org.sonarsource.sonarqube:sonarqube' },
   updateQuery: () => {}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js
index 6f3655c42ec..1d3d5cec290 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js
@@ -66,7 +66,7 @@ const DEFAULT_PROPS = {
   deleteAnalysis: () => {},
   deleteEvent: () => {},
   graphLoading: false,
-  loading: false,
+  initializing: false,
   project: {
     key: 'org.sonarsource.sonarqube:sonarqube',
     leakPeriodDate: '2017-05-16T13:50:02+0200'
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap
index 9a69a6e5a04..64f9f8018ac 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap
@@ -70,7 +70,7 @@ exports[`should render correctly 1`] = `
         className="boxed-group-inner"
         deleteAnalysis={[Function]}
         deleteEvent={[Function]}
-        loading={false}
+        initializing={false}
         project={
           Object {
             "key": "org.sonarsource.sonarqube:sonarqube",