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 3ac96ea7a8b514b708f652204cc514e1e4686a04..a0f5a69634e351d83b83205a7e00b830ec4131bd 100644 (file)
--- 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 5121c8d6e90bcc061ed2d1ca960c2945baab4b37..da8e15fd76bd253dd9b1367732972b3ac1fbe6e1 100644 (file)
--- 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 b9b172b9b7746dc72e1dcd91f1e1f11683830b2d..5f8e064860b697ce9e8c841acf774ed082c73eab 100644 (file)
--- 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 a0e0f30cbc3d0f62e09c5a63fc6a01161861e7e1..c4c5d43a35677b81c2c3203eb5cde68eba047785 100644 (file)
--- 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;