Use "small-loading-icon" insead of "btn-octicon is-loading" (#26710)

The "btn-octicon is-loading" was introduced by #21842 , it is only used
by the "Copy Content" button, but the "btn-octicon" selector would
affect too many uncertain elements.

Now there is a general "small-loading-icon" class, so the "btn-octicon
is-loading" could be removed.

diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 2f69117928e837b44f9e8447a1f8217d880df209..ea1409687a7e2de50f97dc9fdb8e41e8de633767 100644 (file)
--- a/web_src/css/modules/animations.css
+++ b/web_src/css/modules/animations.css
@@ -57,13 +57,6 @@ form.single-button-form.is-loading .button {
   background: transparent;
 }
 
-/* TODO: not needed, use "is-loading small-loading-icon" instead */
-.btn-octicon.is-loading::after {
-  border-width: 2px;
-  height: 1.25rem;
-  width: 1.25rem;
-}
-
 /* TODO: not needed, use "is-loading small-loading-icon" instead */
 code.language-math.is-loading::after {
   padding: 0;

diff --git a/web_src/js/features/copycontent.js b/web_src/js/features/copycontent.js
index 621d6dab73c4356a5c9f31f4b090c4f7e4279b39..c1419a524bb5b3293415aff6c7126eaa07fcc362 100644 (file)
--- a/web_src/js/features/copycontent.js
+++ b/web_src/js/features/copycontent.js
@@ -18,7 +18,7 @@ export function initCopyContent() {
     // the text to copy is not in the DOM or it is an image which should be
     // fetched to copy in full resolution
     if (link) {
-      btn.classList.add('is-loading');
+      btn.classList.add('is-loading', 'small-loading-icon');
       try {
         const res = await fetch(link, {credentials: 'include', redirect: 'follow'});
         const contentType = res.headers.get('content-type');
@@ -32,7 +32,7 @@ export function initCopyContent() {
       } catch {
         return showTemporaryTooltip(btn, i18n.copy_error);
       } finally {
-        btn.classList.remove('is-loading');
+        btn.classList.remove('is-loading', 'small-loading-icon');
       }
     } else { // text, read from DOM
       const lineEls = document.querySelectorAll('.file-view .lines-code');