add boxed group animation

3 files changed, 100 insertions, 2 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/boxed-group.css b/server/sonar-web/src/main/js/app/styles/boxed-group.css
index 1fa93c779ad..6709d652381 100644
--- a/server/sonar-web/src/main/js/app/styles/boxed-group.css
+++ b/server/sonar-web/src/main/js/app/styles/boxed-group.css
@@ -40,3 +40,97 @@
   margin-right: -20px;
   padding: 8px 20px;
 }
+
+.boxed-group-loading {
+  position: relative;
+  transition: border-color 0.25s;
+}
+
+.boxed-group-loading:before,
+.boxed-group-loading:after {
+  position: absolute;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  content: '';
+}
+
+.boxed-group-loading:before {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-top-color: #4b9fd5;
+  border-right-color: #4b9fd5;
+  animation: 3s top-left-border 0s infinite;
+}
+
+.boxed-group-loading:after {
+  width: 0;
+  height: 0;
+  bottom: 0;
+  right: 0;
+  border-bottom-color: #4b9fd5;
+  border-left-color: #4b9fd5;
+  animation: 3s border-bottom-border 0s infinite;
+}
+
+@keyframes top-left-border {
+  0% {
+    width: 0;
+    height: 0;
+  }
+
+  25% {
+    width: 100%;
+    height: 0;
+  }
+
+  50% {
+    width: 100%;
+    height: 100%;
+  }
+
+  75% {
+    width: 100%;
+    height: 100%;
+  }
+
+  100% {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@keyframes border-bottom-border {
+  0% {
+    width: 0;
+    height: 0;
+    border-width: 0;
+  }
+
+  25% {
+    width: 0;
+    height: 0;
+    border-width: 0;
+  }
+
+  50% {
+    width: 0;
+    height: 0;
+    border-width: 0;
+  }
+
+  51% {
+    border-width: 2px;
+  }
+
+  75% {
+    width: 100%;
+    height: 0;
+  }
+
+  100% {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
index e76fa0e975d..8ed3558a129 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import classNames from 'classnames';
 import ProjectCardMeasures from './ProjectCardMeasures';
 import { getComponentUrl } from '../../../helpers/urls';
 
@@ -33,8 +34,10 @@ export default class ProjectCard extends React.Component {
       return null;
     }
 
+    const className = classNames('boxed-group', 'project-card', { 'boxed-group-loading': this.props.measures == null });
+
     return (
-        <div className="boxed-group project-card">
+        <div className={className}>
           <h2 className="project-card-name">
             <a className="link-base-color" href={getComponentUrl(project.key)}>{project.name}</a>
           </h2>
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js
index 47f4a105589..9a7d69d9855 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js
@@ -65,7 +65,8 @@ export default class ProjectsList extends React.Component {
                         rowCount={projects.length}
                         rowHeight={135}
                         rowRenderer={rowRenderer}
-                        scrollTop={scrollTop}/>
+                        scrollTop={scrollTop}
+                        overscanRowCount={100}/>
                 )}
               </AutoSizer>
           )}