SONAR-12072 Fix full re-rendering of the Projects list when paginating

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 70b8d4657a13f417fd3c5f6108d0aa503bf18914..19b0afa67d3ea51b6e42bf60a136a407cb00b576 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -309,43 +309,44 @@ export class AllProjects extends React.PureComponent<Props, State> {
   );
 
   renderMain = () => {
-    return (
-      <DeferredSpinner loading={this.state.loading}>
-        {this.getView() === 'visualizations' ? (
-          <div className="layout-page-main-inner">
-            {this.state.projects && (
-              <Visualizations
-                displayOrganizations={!this.props.organization && isSonarCloud()}
-                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}
-                handleFavorite={this.handleFavorite}
-                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>
+    if (this.state.loading && this.state.projects === undefined) {
+      return <DeferredSpinner />;
+    }
+
+    return this.getView() === 'visualizations' ? (
+      <div className="layout-page-main-inner">
+        {this.state.projects && (
+          <Visualizations
+            displayOrganizations={!this.props.organization && isSonarCloud()}
+            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}
+            handleFavorite={this.handleFavorite}
+            isFavorite={this.props.isFavorite}
+            isFiltered={hasFilterParams(this.state.query)}
+            organization={this.props.organization}
+            projects={this.state.projects}
+            query={this.state.query}
+          />
         )}
-      </DeferredSpinner>
+        <ListFooter
+          count={this.state.projects !== undefined ? this.state.projects.length : 0}
+          loading={this.state.loading}
+          loadMore={this.fetchMoreProjects}
+          ready={!this.state.loading}
+          total={this.state.total !== undefined ? this.state.total : 0}
+        />
+      </div>
     );
   };
 

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 28726c14b968c25d3cc7f0f935bde9b845414a46..d902f9e0b7017c9719f90883fbe5a1d588124994 100644 (file)
--- 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
@@ -111,66 +111,62 @@ exports[`renders 1`] = `
         </div>
       </div>
     </div>
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <div
+      className="layout-page-main-inner"
     >
-      <div
-        className="layout-page-main-inner"
-      >
-        <ProjectsList
-          cardType="overall"
-          currentUser={
-            Object {
-              "isLoggedIn": true,
-            }
-          }
-          handleFavorite={[Function]}
-          isFavorite={false}
-          isFiltered={false}
-          projects={
-            Array [
-              Object {
-                "key": "foo",
-                "measures": Object {},
-                "name": "Foo",
-                "tags": Array [],
-                "visibility": "public",
-              },
-            ]
+      <ProjectsList
+        cardType="overall"
+        currentUser={
+          Object {
+            "isLoggedIn": true,
           }
-          query={
+        }
+        handleFavorite={[Function]}
+        isFavorite={false}
+        isFiltered={false}
+        projects={
+          Array [
             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,
-            }
+              "key": "foo",
+              "measures": Object {},
+              "name": "Foo",
+              "tags": Array [],
+              "visibility": "public",
+            },
+          ]
+        }
+        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,
           }
-        />
-        <ListFooter
-          count={1}
-          loadMore={[Function]}
-          ready={true}
-          total={0}
-        />
-      </div>
-    </DeferredSpinner>
+        }
+      />
+      <ListFooter
+        count={1}
+        loadMore={[Function]}
+        loading={false}
+        ready={true}
+        total={0}
+      />
+    </div>
   </div>
 </div>
 `;
@@ -243,31 +239,26 @@ exports[`renders 2`] = `
         </div>
       </div>
     </div>
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <div
+      className="layout-page-main-inner"
     >
-      <div
-        className="layout-page-main-inner"
-      >
-        <Visualizations
-          displayOrganizations={false}
-          projects={
-            Array [
-              Object {
-                "key": "foo",
-                "measures": Object {},
-                "name": "Foo",
-                "tags": Array [],
-                "visibility": "public",
-              },
-            ]
-          }
-          total={0}
-          visualization="risk"
-        />
-      </div>
-    </DeferredSpinner>
+      <Visualizations
+        displayOrganizations={false}
+        projects={
+          Array [
+            Object {
+              "key": "foo",
+              "measures": Object {},
+              "name": "Foo",
+              "tags": Array [],
+              "visibility": "public",
+            },
+          ]
+        }
+        total={0}
+        visualization="risk"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -411,70 +402,66 @@ exports[`renders correctly empty organization 3`] = `
         </div>
       </div>
     </div>
-    <DeferredSpinner
-      loading={false}
-      timeout={100}
+    <div
+      className="layout-page-main-inner"
     >
-      <div
-        className="layout-page-main-inner"
-      >
-        <ProjectsList
-          cardType="overall"
-          currentUser={
-            Object {
-              "isLoggedIn": true,
-            }
+      <ProjectsList
+        cardType="overall"
+        currentUser={
+          Object {
+            "isLoggedIn": true,
+          }
+        }
+        handleFavorite={[Function]}
+        isFavorite={false}
+        isFiltered={false}
+        organization={
+          Object {
+            "key": "foo",
+            "name": "Foo",
           }
-          handleFavorite={[Function]}
-          isFavorite={false}
-          isFiltered={false}
-          organization={
+        }
+        projects={
+          Array [
             Object {
               "key": "foo",
+              "measures": Object {},
               "name": "Foo",
-            }
-          }
-          projects={
-            Array [
-              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,
-            }
+            },
+          ]
+        }
+        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,
           }
-        />
-        <ListFooter
-          count={1}
-          loadMore={[Function]}
-          ready={true}
-          total={0}
-        />
-      </div>
-    </DeferredSpinner>
+        }
+      />
+      <ListFooter
+        count={1}
+        loadMore={[Function]}
+        loading={false}
+        ready={true}
+        total={0}
+      />
+    </div>
   </div>
 </div>
 `;