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

3 files changed, 25 insertions, 8 deletions

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;
 }