GAUD-9445: only render loading backdrop when shown

[dlockhart]

When this feature shipped, there was an issue where the loading spinner was getting in the way even when the backdrop-loading wasn't used -- which is the case almost everywhere.

This changes things around so that by default the backdrop will both be display: none and also render nothing. Once it's shown, then it'll render things and start the animations/spinner.

That required some changes to timings, as you can't animate something that's display: none or not rendered! 😆

[github-actions]

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL	https://live.d2l.dev/prs/BrightspaceUI/core/pr-6601/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

[dlockhart]

There's a new default hidden state.

So the lifecycle now looks like:

1. hidden: nothing rendered, host is display: none
2. showing: host and loading spinner are rendered but have opacity: 0
3. shown: opacity is now set, fade-in animation starts
4. hiding: opacity is set back to 0, fade-out animation starts
5. hidden: back to the beginning, nothing is rendered and host is display: none

[dlockhart]

This is the trick/magic here, as we move the 800ms delay from the animation to a timeout. This allows things to render with no visible changes for 800ms, then start the fade-in.

[duncanuszkay-d2l]

Oh cool- good idea 👀

One Q- does this get cancelled if the load takes less time than the delay? E.G. does it ever go hidden -> showing -> hidden -> shown and get stuck in that state?

[duncanuszkay-d2l]

Looks like I can trigger that scenario if I adjust the load timing on the demo to 50ms from 5000ms:

Recording.2026-02-13.162017.mp4

Though I imagine that's a solvable problem- I'll try adding on a check in the timeout block?

[duncanuszkay-d2l]

This patch prevents that issue afaict:

if (this._state === 'showing') {
  setTimeout(() => {
	  if (this._state === 'showing') this._state = 'shown';
  }, BACKDROP_DELAY_MS);
}

[dlockhart]

Oh yeah good call! Yeah I think a check in the timeout block would work, just to make sure it's still in the state it expects.

[dlockhart]

Ok that's fixed, good catch. I also needed to just hide immediately in #fade() if shown gets set to false while things are still showing.

[dlockhart]

I also removed _state on the backdrop and spinner as we can just use a :host([_state="whatever"]) d2l-loading-spinner selector.

Size also isn't needed anymore since nothing renders at all when the state is hidden.

[duncanuszkay-d2l]

👀 CSS noob question- why are we setting this here?

[duncanuszkay-d2l]

I see in the W3 schools docs that this uses a flexbox layout which aligns items in a row- but these are laid out more on top of each other 🤔

[dlockhart]

Using flexbox is an alternate (and IMO better) way to center the d2l-loading-spinner horizontally, instead of width: 100%; height: 100% which results in it taking up 100% of the space. Which is... fine, but not what I would have expected.

[duncanuszkay-d2l]

Ah I see, I assume that centers by default because you're using it in conjunction with justify-content:center?

[dlockhart]

Yeah exactly. There are a few other ways... left: 50% + a transform: translate(-50%, -50%) but I like avoiding transform whenever possible.

[duncanuszkay-d2l]

The less rendering, the better 😸 Learned the hard way!

This change looks like an improvement to me, so I'll leave my ✅