Display about page faster

7 files changed, 70 insertions, 58 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
index ee0a05da356..f22509ca1d5 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -104,18 +104,17 @@ class AboutApp extends React.PureComponent {
   }
 
   render() {
-    if (this.state.loading) {
-      return null;
-    }
-
     const { customText, sonarqubeDotCom } = this.props;
-
-    // $FlowFixMe
-    const bugs = this.state.issueTypes['BUG'].count;
-    // $FlowFixMe
-    const vulnerabilities = this.state.issueTypes['VULNERABILITY'].count;
-    // $FlowFixMe
-    const codeSmells = this.state.issueTypes['CODE_SMELL'].count;
+    const { loading, issueTypes, projectsCount } = this.state;
+
+    let bugs;
+    let vulnerabilities;
+    let codeSmells;
+    if (!loading && issueTypes) {
+      bugs = issueTypes['BUG'] && issueTypes['BUG'].count;
+      vulnerabilities = issueTypes['VULNERABILITY'] && issueTypes['VULNERABILITY'].count;
+      codeSmells = issueTypes['CODE_SMELL'] && issueTypes['CODE_SMELL'].count;
+    }
 
     if (sonarqubeDotCom && sonarqubeDotCom.value === 'true') {
       return (
@@ -125,7 +124,8 @@ class AboutApp extends React.PureComponent {
           codeSmells={codeSmells}
           currentUser={this.props.currentUser}
           customText={customText}
-          projectsCount={this.state.projectsCount}
+          loading={loading}
+          projectsCount={projectsCount}
           vulnerabilities={vulnerabilities}
         />
       );
@@ -152,11 +152,12 @@ class AboutApp extends React.PureComponent {
             </div>
 
             <div className="about-page-instance">
-              <AboutProjects count={this.state.projectsCount} />
+              <AboutProjects count={projectsCount} loading={loading} />
               <EntryIssueTypes
                 bugs={bugs}
-                vulnerabilities={vulnerabilities}
                 codeSmells={codeSmells}
+                loading={loading}
+                vulnerabilities={vulnerabilities}
               />
             </div>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
index 6d7030247c3..8b812156976 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
@@ -41,6 +41,7 @@ type Props = {
   codeSmells: number,
   currentUser: { isLoggedIn: boolean },
   customText?: string,
+  loading: boolean,
   projectsCount: number,
   vulnerabilities: number
 };
@@ -69,11 +70,12 @@ export default function AboutAppForSonarQubeDotCom(props: Props) {
           </div>
 
           <div className="sqcom-about-page-instance">
-            <AboutProjects count={props.projectsCount} />
+            <AboutProjects count={props.projectsCount} loading={props.loading} />
             <EntryIssueTypesForSonarQubeDotCom
               bugs={props.bugs}
-              vulnerabilities={props.vulnerabilities}
               codeSmells={props.codeSmells}
+              loading={props.loading}
+              vulnerabilities={props.vulnerabilities}
             />
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
index 4d240868177..876eb9c74e1 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
@@ -17,30 +17,32 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+//@flow
 import React from 'react';
 import { Link } from 'react-router';
 import { formatMeasure } from '../../../helpers/measures';
 import { translate } from '../../../helpers/l10n';
 
-export default class AboutProjects extends React.PureComponent {
-  static propTypes = {
-    count: React.PropTypes.number.isRequired
-  };
+type Props = {
+  count: number,
+  loading: boolean
+};
 
-  render() {
-    return (
-      <div className="about-page-projects">
+export default function AboutProjects({ count, loading }: Props) {
+  return (
+    <div className="about-page-projects">
+      {loading && <i className="spinner" />}
+      {!loading &&
         <div>
           <div>
             <Link to="/projects" className="about-page-projects-link">
-              {formatMeasure(this.props.count, 'INT')}
+              {formatMeasure(count, 'INT')}
             </Link>
           </div>
           <div>
             {translate('about_page.projects_analyzed')}
           </div>
-        </div>
-      </div>
-    );
-  }
+        </div>}
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
index 349dbf85bba..58bf0b7987c 100644
--- a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
+++ b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+//@flow
 import React from 'react';
 import { Link } from 'react-router';
 import { formatMeasure } from '../../../helpers/measures';
@@ -26,18 +27,18 @@ import BugIcon from '../../../components/ui/BugIcon';
 import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
 import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
 
-export default class EntryIssueTypes extends React.PureComponent {
-  static propTypes = {
-    bugs: React.PropTypes.number.isRequired,
-    vulnerabilities: React.PropTypes.number.isRequired,
-    codeSmells: React.PropTypes.number.isRequired
-  };
+type Props = {
+  bugs: ?number,
+  codeSmells: ?number,
+  loading: boolean,
+  vulnerabilities: ?number
+};
 
-  render() {
-    const { bugs, vulnerabilities, codeSmells } = this.props;
-
-    return (
-      <div className="about-page-projects">
+export default function EntryIssueTypes({ bugs, codeSmells, loading, vulnerabilities }: Props) {
+  return (
+    <div className="about-page-projects">
+      {loading && <i className="spinner" />}
+      {!loading &&
         <table className="about-page-issue-types">
           <tbody>
             <tr>
@@ -84,8 +85,7 @@ export default class EntryIssueTypes extends React.PureComponent {
               </td>
             </tr>
           </tbody>
-        </table>
-      </div>
-    );
-  }
+        </table>}
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js
index e7ef546f2ac..0dbe782918a 100644
--- a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js
+++ b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+//@flow
 import React from 'react';
 import { Link } from 'react-router';
 import { formatMeasure } from '../../../helpers/measures';
@@ -26,18 +27,23 @@ import BugIconForSonarQubeDotCom from './BugIconForSonarQubeDotCom';
 import VulnerabilityIconForSonarQubeDotCom from './VulnerabilityIconForSonarQubeDotCom';
 import CodeSmellIconForSonarQubeDotCom from './CodeSmellIconForSonarQubeDotCom';
 
-export default class EntryIssueTypesForSonarQubeDotCom extends React.PureComponent {
-  static propTypes = {
-    bugs: React.PropTypes.number.isRequired,
-    vulnerabilities: React.PropTypes.number.isRequired,
-    codeSmells: React.PropTypes.number.isRequired
-  };
+type Props = {
+  bugs: ?number,
+  codeSmells: ?number,
+  loading: boolean,
+  vulnerabilities: ?number
+};
 
-  render() {
-    const { bugs, vulnerabilities, codeSmells } = this.props;
-
-    return (
-      <div className="about-page-projects">
+export default function EntryIssueTypesForSonarQubeDotCom({
+  bugs,
+  codeSmells,
+  loading,
+  vulnerabilities
+}: Props) {
+  return (
+    <div className="about-page-projects">
+      {loading && <i className="spinner" />}
+      {!loading &&
         <table className="about-page-issue-types">
           <tbody>
             <tr>
@@ -84,8 +90,7 @@ export default class EntryIssueTypesForSonarQubeDotCom extends React.PureCompone
               </td>
             </tr>
           </tbody>
-        </table>
-      </div>
-    );
-  }
+        </table>}
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css b/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css
index 4767143aa4e..693e4ee3908 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css
@@ -72,6 +72,7 @@
   justify-content: center;
   align-items: center;
   min-width: 190px;
+  min-height: 105px;
   margin-left: 15px;
   padding: 25px;
   background-color: #fff;
diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index 98e4186c6a6..46a0e9added 100644
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -72,6 +72,7 @@
   line-height: 1.4;
   font-size: 16px;
   text-align: center;
+  min-width: 128px;
 }
 
 .about-page-projects-link {