Recent regression - Site Editor - Spinner component not visible / missing CSS.

[Addison-Stavlo]

Describe the bug
The loading spinner does not show up as expected in the site editor. It seems to be missing CSS.

Currently - the spinner component is not visible and seems to be missing styles:

As compared to previously when it did show up, these styles were present:

I noticed this as a recent regression while testing related to the bug where template parts would not resolve when themes are installed in subdirectories - #28088. Drafted Sunday evening, this PR was showing the spinner. After rebasing master this afternoon, the spinners seem to have disappeared as their CSS is no longer present - so it seems a recent change has caused this.

The specific spinner I have noted comes from

gutenberg/packages/block-library/src/template-part/edit/index.js

Line 127 in 9c9617d

{ ! isPlaceholder && ! isResolved && <Spinner /> }

- but adding other spinner components to blocks in the block-library seems to have the same issue.

[Addison-Stavlo]

I wonder if it may be related to the new Iframe? #25775 cc @ellatrix @youknowriad if you may have other ideas about what may have caused this.

[ellatrix]

Sorry for the late reply. What stylesheet should be loaded that isn't loaded right now?

[Addison-Stavlo]

Sorry for the late reply.

No worries, thanks for taking a look!

What stylesheet should be loaded that isn't loaded right now?

After poking around briefly, it looks like it is the styles defined in JS that correspond to what were missing in the screenshots above:

gutenberg/packages/components/src/spinner/styles/spinner-styles.js

Lines 27 to 34 in c6b43a0

	display: inline-block;
	background-color: ${ color( 'gray.600' ) };
	width: ${ config( 'spinnerSize' ) };
	height: ${ config( 'spinnerSize' ) };
	opacity: 0.7;
	margin: 5px 11px 0;
	border-radius: 100%;
	position: relative;

[ellatrix]

@ItsJonQ Did you know more about these generated styles and how to insert them into a different document?

[ItsJonQ]

Haiii!!! Sorry for the late reply @ellatrix .
Yes! I may be able to help with this.

For these styles, what needs to happen is they need to be rendered in a Provider.
This provider tells them which document to insert their styles into.

Previously, I created a library to help with this exact problem:
https://github.com/ItsJonQ/styled-providers#frameprovider

We can use the same technique for the iFrame editor as well