SONAR-9178 Make spinner noticeable on loading projects issues or measure

4 files changed, 113 insertions, 102 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index a97b447e3a1..e0b234e235d 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -39,6 +39,7 @@ import { parseUrlQuery, Query, hasFilterParams, hasVisualizationParams } from '.
 import { isSonarCloud } from '../../../helpers/system';
 import '../../../components/search-navigator.css';
 import '../styles.css';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
 
 export interface Props {
   currentUser: CurrentUser;
@@ -277,40 +278,45 @@ export default class AllProjects extends React.PureComponent<Props, State> {
     </div>
   );
 
-  renderMain = () =>
-    this.getView() === 'visualizations' ? (
-      <div className="layout-page-main-inner">
-        {this.state.projects && (
-          <Visualizations
-            displayOrganizations={!this.props.organization && this.props.organizationsEnabled}
-            projects={this.state.projects}
-            sort={this.state.query.sort}
-            total={this.state.total}
-            visualization={this.getVisualization()}
-          />
-        )}
-      </div>
-    ) : (
-      <div className="layout-page-main-inner">
-        {this.state.projects && (
-          <ProjectsList
-            cardType={this.getView()}
-            currentUser={this.props.currentUser}
-            isFavorite={this.props.isFavorite}
-            isFiltered={hasFilterParams(this.state.query)}
-            organization={this.props.organization}
-            projects={this.state.projects}
-            query={this.state.query}
-          />
+  renderMain = () => {
+    return (
+      <DeferredSpinner loading={this.state.loading}>
+        {this.getView() === 'visualizations' ? (
+          <div className="layout-page-main-inner">
+            {this.state.projects && (
+              <Visualizations
+                displayOrganizations={!this.props.organization && this.props.organizationsEnabled}
+                projects={this.state.projects}
+                sort={this.state.query.sort}
+                total={this.state.total}
+                visualization={this.getVisualization()}
+              />
+            )}
+          </div>
+        ) : (
+          <div className="layout-page-main-inner">
+            {this.state.projects && (
+              <ProjectsList
+                cardType={this.getView()}
+                currentUser={this.props.currentUser}
+                isFavorite={this.props.isFavorite}
+                isFiltered={hasFilterParams(this.state.query)}
+                organization={this.props.organization}
+                projects={this.state.projects}
+                query={this.state.query}
+              />
+            )}
+            <ListFooter
+              count={this.state.projects !== undefined ? this.state.projects.length : 0}
+              loadMore={this.fetchMoreProjects}
+              ready={!this.state.loading}
+              total={this.state.total !== undefined ? this.state.total : 0}
+            />
+          </div>
         )}
-        <ListFooter
-          count={this.state.projects !== undefined ? this.state.projects.length : 0}
-          loadMore={this.fetchMoreProjects}
-          ready={!this.state.loading}
-          total={this.state.total !== undefined ? this.state.total : 0}
-        />
-      </div>
+      </DeferredSpinner>
     );
+  };
 
   render() {
     return (
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 17c584fdc52..c29cc32f56c 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -93,8 +93,6 @@ export default function PageHeader(props: Props) {
         className={classNames('projects-topbar-item', 'is-last', {
           'is-loading': loading
         })}>
-        {loading && <i className="spinner spacer-right" />}
-
         {total != null && (
           <span>
             <strong id="projects-total">{total}</strong> {translate('projects._projects')}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap
index e2dca712a6e..c4ba6c754a1 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/AllProjects-test.tsx.snap
@@ -79,58 +79,63 @@ exports[`renders 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="layout-page-main-inner"
+    <DeferredSpinner
+      loading={false}
+      timeout={100}
     >
-      <ProjectsList
-        cardType="overall"
-        currentUser={
-          Object {
-            "isLoggedIn": true,
+      <div
+        className="layout-page-main-inner"
+      >
+        <ProjectsList
+          cardType="overall"
+          currentUser={
+            Object {
+              "isLoggedIn": true,
+            }
           }
-        }
-        isFavorite={false}
-        isFiltered={false}
-        projects={
-          Array [
+          isFavorite={false}
+          isFiltered={false}
+          projects={
+            Array [
+              Object {
+                "key": "foo",
+                "measures": Object {},
+                "name": "Foo",
+              },
+            ]
+          }
+          query={
             Object {
-              "key": "foo",
-              "measures": Object {},
-              "name": "Foo",
-            },
-          ]
-        }
-        query={
-          Object {
-            "coverage": undefined,
-            "duplications": undefined,
-            "gate": undefined,
-            "languages": undefined,
-            "maintainability": undefined,
-            "new_coverage": undefined,
-            "new_duplications": undefined,
-            "new_lines": undefined,
-            "new_maintainability": undefined,
-            "new_reliability": undefined,
-            "new_security": undefined,
-            "reliability": undefined,
-            "search": undefined,
-            "security": undefined,
-            "size": undefined,
-            "sort": undefined,
-            "tags": undefined,
-            "view": undefined,
-            "visualization": undefined,
+              "coverage": undefined,
+              "duplications": undefined,
+              "gate": undefined,
+              "languages": undefined,
+              "maintainability": undefined,
+              "new_coverage": undefined,
+              "new_duplications": undefined,
+              "new_lines": undefined,
+              "new_maintainability": undefined,
+              "new_reliability": undefined,
+              "new_security": undefined,
+              "reliability": undefined,
+              "search": undefined,
+              "security": undefined,
+              "size": undefined,
+              "sort": undefined,
+              "tags": undefined,
+              "view": undefined,
+              "visualization": undefined,
+            }
           }
-        }
-      />
-      <ListFooter
-        count={1}
-        loadMore={[Function]}
-        ready={true}
-        total={0}
-      />
-    </div>
+        />
+        <ListFooter
+          count={1}
+          loadMore={[Function]}
+          ready={true}
+          total={0}
+        />
+      </div>
+    </DeferredSpinner>
   </div>
 </div>
 `;
@@ -196,24 +201,29 @@ exports[`renders 2`] = `
         </div>
       </div>
     </div>
-    <div
-      className="layout-page-main-inner"
+    <DeferredSpinner
+      loading={false}
+      timeout={100}
     >
-      <Visualizations
-        displayOrganizations={false}
-        projects={
-          Array [
-            Object {
-              "key": "foo",
-              "measures": Object {},
-              "name": "Foo",
-            },
-          ]
-        }
-        total={0}
-        visualization="risk"
-      />
-    </div>
+      <div
+        className="layout-page-main-inner"
+      >
+        <Visualizations
+          displayOrganizations={false}
+          projects={
+            Array [
+              Object {
+                "key": "foo",
+                "measures": Object {},
+                "name": "Foo",
+              },
+            ]
+          }
+          total={0}
+          visualization="risk"
+        />
+      </div>
+    </DeferredSpinner>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap
index 5b8486ad3ec..057c6048368 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap
@@ -75,9 +75,6 @@ exports[`should render correctly while loading 1`] = `
   <div
     className="projects-topbar-item is-last is-loading"
   >
-    <i
-      className="spinner spacer-right"
-    />
     <span>
       <strong
         id="projects-total"