SONAR-10050 Switch Issues/Effort in issues page when data is available

3 files changed, 28 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetItem.tsx b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
index a960cb8af0e..17f9a3c4b16 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetItem.tsx
@@ -25,6 +25,7 @@ export interface Props {
   className?: string;
   disabled?: boolean;
   halfWidth?: boolean;
+  loading?: boolean;
   name: React.ReactNode;
   onClick: (x: string) => void;
   stat?: React.ReactNode;
@@ -34,7 +35,8 @@ export interface Props {
 export default class FacetItem extends React.PureComponent<Props> {
   static defaultProps = {
     disabled: false,
-    halfWidth: false
+    halfWidth: false,
+    loading: false
   };
 
   handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
@@ -52,12 +54,16 @@ export default class FacetItem extends React.PureComponent<Props> {
     return this.props.disabled ? (
       <span className={className} data-facet={this.props.value}>
         <span className="facet-name">{this.props.name}</span>
-        {this.props.stat != null && <span className="facet-stat">{this.props.stat}</span>}
+        {this.props.stat != null && (
+          <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+        )}
       </span>
     ) : (
       <a className={className} data-facet={this.props.value} href="#" onClick={this.handleClick}>
         <span className="facet-name">{this.props.name}</span>
-        {this.props.stat != null && <span className="facet-stat">{this.props.stat}</span>}
+        {this.props.stat != null && (
+          <span className="facet-stat">{this.props.loading ? '' : this.props.stat}</span>
+        )}
       </a>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
index e16c5020383..95c822c8eb3 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/FacetItem-test.tsx
@@ -34,6 +34,10 @@ it('should render stat', () => {
   expect(renderFacetItem({ stat: '13' })).toMatchSnapshot();
 });
 
+it('should loading stat', () => {
+  expect(renderFacetItem({ loading: true })).toMatchSnapshot();
+});
+
 it('should render disabled', () => {
   expect(renderFacetItem({ disabled: true })).toMatchSnapshot();
 });
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
index c0cf80746aa..3044d7ddbbd 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetItem-test.tsx.snap
@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should loading stat 1`] = `
+<a
+  className="facet search-navigator-facet"
+  data-facet="bar"
+  href="#"
+  onClick={[Function]}
+>
+  <span
+    className="facet-name"
+  >
+    foo
+  </span>
+</a>
+`;
+
 exports[`should render active 1`] = `
 <a
   className="facet search-navigator-facet active"