From daabab60cd13a1b42457869af0523d96d6eb6b6a Mon Sep 17 00:00:00 2001
From: Vik Vorona <viktor.vorona@sonarsource.com>
Date: Wed, 24 May 2023 09:22:55 +0200
Subject: [PATCH] SONAR-19146 Fix 'dancing' scrollbars in presence of a spinner
 (#8330)

---
 .../__snapshots__/Checkbox-test.tsx.snap      | 14 +++++++-----
 .../main/js/components/ui/DeferredSpinner.tsx | 22 ++++++++++---------
 2 files changed, 21 insertions(+), 15 deletions(-)

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 ea68408df35..ae3c407b7bd 100644
--- 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 5b9b8550be9..e619906e2ff 100644
--- 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}
       </>
     );
-- 
2.39.5