Merge pull request #16013 from craftcms/bugfix/center-spinners

Center loading spinners when bulk editing

CHANGELOG.md

@@ -17,6 +17,7 @@
 - Fixed a bug where field conditions weren’t taking effect within Matrix fields set to inline-editable blocks mode, if `autosaveDrafts` was disabled. ([#15985](https://github.com/craftcms/cms/issues/15985))
 - Fixed an error that occurred when attempting to delete a nested Matrix entry, if it had an entry type that was no longer allowed for the Matrix field. ([#15990](https://github.com/craftcms/cms/issues/15990))
 - Fixed a bug where structure data wasn’t getting deleted for drafts when moving an entry out of a Structure section. ([#15949](https://github.com/craftcms/cms/issues/15949), [#16014](https://github.com/craftcms/cms/pull/16014))
+- Fixed a bug where loading spinners weren’t always centered. ([#16013](https://github.com/craftcms/cms/pull/16013))
 - Updated Axios to 1.7.7. ([#15958](https://github.com/craftcms/cms/issues/15958))
 
 ## 5.4.9 - 2024-10-22

src/web/assets/cp/src/css/_main.scss

@@ -76,7 +76,6 @@
     inset 0 0 0 3px hsl(var(--dark-focus-hsl) / var(--focus-ring-alpha));
   --touch-target-size: calc(24rem / 16);
   --icon-size: 1rem;
-  --elements-busy-top-position: calc(50% - var(--size, 20px) / 2);
   --lh: 1.42em;
 }
 
@@ -2315,9 +2314,14 @@ ul.icons {
     position: absolute;
     width: var(--size, 20px);
     height: var(--size, 20px);
-    inset-block-start: var(--elements-busy-top-position);
-    inset-inline-start: var(--elements-busy-top-position);
+    transform: translateX(-50%) translateY(-50%);
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
     z-index: 101;
+
+    .rtl & {
+      transform: translateX(50%) translateY(-50%);
+    }
   }
 }
 

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -243,7 +243,7 @@ Craft.BaseElementIndex = Garnish.Base.extend(
       this.$srStatusContainer = this.$container.find('[data-status-message]');
 
       this.$elements = this.$container.find('.elements:first');
-      this.$updateSpinner = this.$elements.find('.spinner');
+      this.$updateSpinner = this.$elements.find('.update-spinner');
 
       if (!this.$updateSpinner.length) {
         this.$updateSpinner = $('<div/>', {
@@ -2725,10 +2725,9 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         let positionTop = Math.floor(scrollTop + windowHeight / 2) - 100;
         positionTop = Math.floor((positionTop / elementsHeight) * 100);
 
-        document.documentElement.style.setProperty(
-          '--elements-busy-top-position',
-          positionTop + '%'
-        );
+        this.$updateSpinner.css({
+          insetBlockStart: `${positionTop}%`,
+        });
       }
       this.updateLiveRegion(Craft.t('app', 'Loading'));
     },