SONAR-19146 Fix 'dancing' scrollbars in presence of a spinner (#8330)

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
index ea68408df358fe0b196cf16ca7c478fde971369b..ae3c407b7bd2e5f30098b1960f8f121456c5ddef 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Checkbox-test.tsx.snap
@@ -39,11 +39,15 @@ exports[`should render the checkbox on the right 1`] = `
   <a>
     child
   </a>
-  <i
-    aria-live="polite"
-    class="deferred-spinner a11y-hidden"
-    data-testid="deferred-spinner"
-  />
+  <div
+    class="sw-overflow-hidden"
+  >
+    <i
+      aria-live="polite"
+      class="deferred-spinner a11y-hidden"
+      data-testid="deferred-spinner"
+    />
+  </div>
   <i
     class="icon-checkbox icon-checkbox-checked"
   />

diff --git a/server/sonar-web/src/main/js/components/ui/DeferredSpinner.tsx b/server/sonar-web/src/main/js/components/ui/DeferredSpinner.tsx
index 5b9b8550be91a99b4e2344a08805ef30442d93c6..e619906e2ff106704e4d3631321e060537ce547a 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/DeferredSpinner.tsx
+++ b/server/sonar-web/src/main/js/components/ui/DeferredSpinner.tsx
@@ -92,16 +92,18 @@ export default class DeferredSpinner extends React.PureComponent<Props, State> {
 
     return (
       <>
-        <i
-          aria-live="polite"
-          data-testid="deferred-spinner"
-          className={classNames('deferred-spinner', className, {
-            'a11y-hidden': !showSpinner,
-            'is-loading': showSpinner,
-          })}
-        >
-          {showSpinner && <span className="a11y-hidden">{ariaLabel}</span>}
-        </i>
+        <div className="sw-overflow-hidden">
+          <i
+            aria-live="polite"
+            data-testid="deferred-spinner"
+            className={classNames('deferred-spinner', className, {
+              'a11y-hidden': !showSpinner,
+              'is-loading': showSpinner,
+            })}
+          >
+            {showSpinner && <span className="a11y-hidden">{ariaLabel}</span>}
+          </i>
+        </div>
         {!showSpinner && children}
       </>
     );