From: Grégoire Aubert <gregoire.aubert@sonarsource.com>
Date: Tue, 8 Aug 2017 12:22:25 +0000 (+0200)
Subject: SONAR-9608 Prevent the shortcuts from moving while loading in the page actions
X-Git-Tag: 6.6-RC1~635
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=5bda516e7f849d1e5d32df47c689f8645955bae7;p=sonarqube.git

SONAR-9608 Prevent the shortcuts from moving while loading in the page actions
---

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js b/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js
index 3ac96ea7a8b..a0f5a69634e 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/PageActions.js
@@ -55,7 +55,7 @@ export default class PageActions extends React.PureComponent {
 
   renderFileShortcuts() {
     return (
-      <span className="note big-spacer-right">
+      <span className="note spacer-right">
         <span>
           <span className="shortcut-button little-spacer-right">←</span>
           {translate('component_measures.to_navigate_back')}
@@ -72,7 +72,9 @@ export default class PageActions extends React.PureComponent {
         {!isFile && showShortcuts && this.renderShortcuts()}
         {isFile && this.renderFileShortcuts()}
         <div className="measure-details-page-actions">
-          <DeferredSpinner loading={this.props.loading} />
+          <DeferredSpinner loading={this.props.loading}>
+            <i className="spinner-placeholder" />
+          </DeferredSpinner>
           {paging != null &&
             <FilesCounter
               className="spacer-left"
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/PageActions-test.js.snap b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/PageActions-test.js.snap
index 5121c8d6e90..da8e15fd76b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/PageActions-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/__tests__/__snapshots__/PageActions-test.js.snap
@@ -5,7 +5,7 @@ exports[`should display correctly for a file 1`] = `
   className="pull-right"
 >
   <span
-    className="note big-spacer-right"
+    className="note spacer-right"
   >
     <span>
       <span
@@ -22,7 +22,11 @@ exports[`should display correctly for a file 1`] = `
     <DeferredSpinner
       loading={false}
       timeout={100}
-    />
+    >
+      <i
+        className="spinner-placeholder"
+      />
+    </DeferredSpinner>
   </div>
 </div>
 `;
@@ -69,7 +73,11 @@ exports[`should display correctly for a project 1`] = `
     <DeferredSpinner
       loading={true}
       timeout={100}
-    />
+    >
+      <i
+        className="spinner-placeholder"
+      />
+    </DeferredSpinner>
   </div>
 </div>
 `;
@@ -84,7 +92,11 @@ exports[`should display the total of files 1`] = `
     <DeferredSpinner
       loading={true}
       timeout={100}
-    />
+    >
+      <i
+        className="spinner-placeholder"
+      />
+    </DeferredSpinner>
     <FilesCounter
       className="spacer-left"
       current={12}
@@ -104,7 +116,11 @@ exports[`should not display shortcuts for treemap 1`] = `
     <DeferredSpinner
       loading={true}
       timeout={100}
-    />
+    >
+      <i
+        className="spinner-placeholder"
+      />
+    </DeferredSpinner>
   </div>
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/component-measures/style.css b/server/sonar-web/src/main/js/apps/component-measures/style.css
index b9b172b9b77..5f8e064860b 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/style.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/style.css
@@ -27,7 +27,6 @@
 
 .measure-details-page-actions {
   display: inline-block;
-  min-width: 80px;
   text-align: right;
 }
 
diff --git a/server/sonar-web/src/main/less/init/icons.less b/server/sonar-web/src/main/less/init/icons.less
index a0e0f30cbc3..c4c5d43a356 100644
--- a/server/sonar-web/src/main/less/init/icons.less
+++ b/server/sonar-web/src/main/less/init/icons.less
@@ -739,6 +739,15 @@ a:hover > .icon-radio {
   animation: spin 0.75s infinite linear;
 }
 
+.spinner-placeholder {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  visibility: hidden;
+}
+
 .spinner:before,
 .spinner:after {
   left: -2px;