Customizer and Theme Installer spinners should have different z-index

[afercia]

My bad, I think this has to do with some previous changes I've made on these spinners. Looks like after [36518] the "loading" spinner in the Customizer is hidden, at least in some browsers.

While the spinners used in the Customizer and in the Theme installer are basically the same and so the CSS rule for them was grouped in just one rule in [36518], I think the only CSS property that has to be different is z-index. As far as I see, the Theme installer needs a value of -1 but this will hide the spinner in the Customizer so it has to be 0 here.

The fix would be trivial but I'd greatly appreciate some testing to confirm the issue, in different browsers.

[afercia]

Opacity (on the iframe) and transform (on the spinner) can create ​new stacking contexts so I'd be inclined to simplify. Don't see a good reason for all the z-index used here.

[celloexpressions]

Yeah, the z-index situation here is pretty messy, so it's hard to tell what should be necessary vs. excessive.

[afercia]

In the proposed patch, a minimal approach that removes z-index where not necessary. The spinner is now a CSS pseudo element natively stacked above the full overlay and below the iframe. No need for z-index. As far as I've tested, should work in all browser except the Theme installer in IE because IE doesn't allow iframe transparency when the iframe src attribute is set to an external domain.

Places where to check the patch:

• the "customize container" which opens for example when clicking "Customize" on the currently active theme in "Themes" (actually there are 2 spinners here, the first one initially displayed in the center of the page and then a second one in the right frame preview)
• the standard Customizer right frame preview, for example clicking "Customize" on the toolbar from the front end
• the Theme installer (Themes > Add New > Details & Preview on any theme and then browse themes

[celloexpressions]

This patch needs testing and careful CSS review to move forward.

Refreshing patch
Tests below
Trac ticket: https://core.trac.wordpress.org/ticket/36911

[SirLouen]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/9094.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.29.0
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-One 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Testing Instructions

1. Go to the Customizer
2. Check if the spinner is shown during loading
3. 🐞 Spinner is not shown

Actual Results

1. ✅ Issue resolved with patch.
2. Screencasts attached showing pre and post patch

Supplemental Artifacts

Before patch screencast:
​https://f003.backblazeb2.com/file/wordpress-videos/wp-videos/2025/06/36911.1.mp4

After patch screencast:
​https://f003.backblazeb2.com/file/wordpress-videos/wp-videos/2025/06/36911.2.mp4

[SirLouen]

@sabernhardt this is a little old, but do you like this patch?
The relative part is the only thing I'm not 100% confident. It feels that z-index was not enough and given that customizer iframe is a static area, it could make sense.