feat: Table visual loading state by duncanuszkay-d2l · Pull Request #6552 · BrightspaceUI/core

duncanuszkay-d2l · 2026-02-04T16:53:02Z

We want to add a visual loading state to the table in the event that the data needs to be refreshed. This can occur after filters are applied, sort orders are changed, and possibly in future when we move to a new page.

I took the initial timings and design from two sources:

Since this functionality may be generally useful, I've tentatively moved it into it's own component and listed it in the docs as a related component to the backdrop.

Demo of the Daylight Docs

Recording.2026-02-05.163844.mp4

Demo of the component in practice:

In this video I cover three scenarios:

The animation has time to fully fade-in before it's disabled
The animation starts fading in before it's disabled
The animation is disabled during the initial delay

Recording.2026-02-05.115314.mp4

Alternatives

Alternatively, we can consider updating the backdrop component itself to be able to encompass both scenarios.

A draft of that approach can be found here: #6570

github-actions · 2026-02-04T16:54:10Z

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-6552/

Note

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

duncanuszkay-d2l · 2026-02-05T16:19:48Z

components/table/table-loading-backdrop.js

+const BACKDROP_DELAY_MS = 800;
+const BACKDROP_FADE_IN_DURATION_MS = 500;
+const BACKDROP_FADE_OUT_DURATION_MS = 500;
+const SPINNER_DELAY_MS = BACKDROP_DELAY_MS + BACKDROP_FADE_IN_DURATION_MS;
+const SPINNER_FADE_IN_DURATION_MS = 500;
+const SPINNER_FADE_OUT_DURATION_MS = 500;


Values to be discussed with design folks on the Gaudi side- some of these might be redundant if we don't plan on differentiating the values, in which case I can simply the CSS below a bit.

duncanuszkay-d2l · 2026-02-05T16:20:22Z

components/backdrop/loading-backdrop.js

+	static get properties() {
+		return {
+			shown: { type: Boolean },
+			_state: { type: String, reflect: true },


Following a similar pattern to backdrop.js here using a string state

duncanuszkay-d2l · 2026-02-05T16:21:46Z

components/backdrop/loading-backdrop.js

+	}
+
+	static get styles() {
+		return css`


I discussed leveraging some styles from backdrop.js by changing that module to export some styles, similar to how we export tableStyles, but ultimately found that there wasn't all that much overlap aside from the color and opacity. I didn't feel it was worth the indirection- but open to opinions here.

At some point in the near future we will be replacing the color with a more meaningful CSS variable that they both can use.

duncanuszkay-d2l · 2026-02-05T16:23:23Z

components/backdrop/loading-backdrop.js

+	static get styles() {
+		return css`
+			:host, .backdrop, d2l-loading-spinner {
+				width: 0%;


A learning point for me- when using transitions, I can't rely on display: none to keep the table interactive while this isn't on, because going from display:none; opacity: 0 to display:block; opacity: 1 doesn't count as a change in opacity, as the display:none version didn't render at all. Bit of a hassle for fade-in components like these.

This approach to change the width instead matches the implementation in backdrop.js.

duncanuszkay-d2l · 2026-02-05T16:24:27Z

components/backdrop/loading-backdrop.js

+
+			d2l-loading-spinner {
+				z-index: 999;
+				top: 100px;


Some design input is needed here- I'm not sure exactly how we want to quantify the vertical positioning of the spinner relative to the table. 100px was my 'looks fine to me' value, but maybe there's something more clever relative to the size of the viewport or something 😄

duncanuszkay-d2l · 2026-02-05T16:25:10Z

components/backdrop/loading-backdrop.js

+				width: 100%;
+				height: 100%;


Changing the width/height here is how we ensure that our components are shown- also, while these are true, the table below is non-interactive (can't highlight, etc), because these render on top.

duncanuszkay-d2l · 2026-02-05T16:26:17Z

components/table/table-loading-backdrop.js

+
+			d2l-loading-spinner[_state="showing"] {
+				opacity: 1;
+				transition: opacity ${SPINNER_FADE_IN_DURATION_MS}ms ease-in-out ${SPINNER_DELAY_MS}ms;


I've biased this implementation towards configurability for now with individual timings for fade in/fade out, but depending on what Gaudi folks think it might not be necessary, then we can define the transition just once on each element.

duncanuszkay-d2l · 2026-02-05T16:27:21Z

components/backdrop/loading-backdrop.js

+			@media (prefers-reduced-motion: reduce) {
+				* { transition: none}
+			}


I may need some guidance on these animation preferences before shipping this- I'm not sure exactly what I need to be responsive to

duncanuszkay-d2l · 2026-02-05T16:28:10Z

components/table/table-loading-backdrop.js

+
+	render() {
+		return html`
+			<d2l-loading-spinner _state=${this._state} size="100"></d2l-loading-spinner>


Spinner size here was chosen arbitrarily based on the example in the daylight docs- may need design guidance on the appropriate static/dynamic size.

duncanuszkay-d2l · 2026-02-05T16:56:52Z

components/backdrop/loading-backdrop.js

+			}),
+			new Promise(resolve => {
+				loadingSpinner.addEventListener('transitionend', resolve, { once: true });
+				loadingSpinner.addEventListener('transitioncancel', resolve, { once: true });


Listening to the transition cancel here deals with the case where the fade-in animation wasn't complete before we started the fade-out.

If we just listen for transitionend, the promise will never enqueue in that scenario, because after the fade-in gets cancelled the fade-out is never enqueued because we're already 'faded out' in terms of opacity.

This addition receives the cancel from the fade-in animation and clears the loading state accordingly

duncanuszkay-d2l · 2026-02-05T16:58:46Z

components/table/table-wrapper.js

 	render() {
-		const slot = html`<slot @slotchange="${this._handleSlotChange}"></slot>`;
+		const slot = html`
+			<d2l-table-loading-backdrop ?shown=${this.loading}></d2l-table-loading-backdrop>


This positioning of the element projects the backdrop over the scroll wrapper

dbatiste · 2026-02-05T17:40:52Z

components/backdrop/loading-backdrop.js

I foresee us wanting to use this elsewhere, for example in d2l-list. I'd be inclined to consider making this more general. It might make sense to define this as a different type of backdrop alongside d2l-backdrop. Alternatively enhancing d2l-backdrop for this case, but making this a separate component helps avoid the conditional logic and behaviour since there are a few things d2l-backdrop does that this doesn't.

It could be defined alongside the CollectionMixin since both d2l-table-wrapper and d2l-list extend that, but unfortunately that currently resides outside of components.

Makes sense- I'll take a pass to generalize and we can figure out the name/location from there.

dbatiste · 2026-02-05T17:48:30Z

components/backdrop/loading-backdrop.js

+			:host, .backdrop, d2l-loading-spinner {
+				width: 0%;
+				height: 0%;
+				position: absolute;


Is the d2l-table-wrapper the containing block for this? i.e. it is only rendering the backdrop over the table?

No- the containing block is the scroll wrapper

But visually yes, it only renders the backdrop over the table and leaves the rest of the page interactive

components/table/table-loading-backdrop.js

github-actions bot mentioned this pull request Feb 4, 2026

Updating vdiff goldens for PR 6552 #6553

Closed

duncanuszkay-d2l force-pushed the dunk.table-loading branch from d5acf16 to 5631193 Compare February 5, 2026 16:18

duncanuszkay-d2l commented Feb 5, 2026

View reviewed changes

feat: Table visual loading state

41555c8

duncanuszkay-d2l force-pushed the dunk.table-loading branch from 5631193 to 41555c8 Compare February 5, 2026 16:53

duncanuszkay-d2l commented Feb 5, 2026

View reviewed changes

duncanuszkay-d2l requested a review from dbatiste February 5, 2026 16:59

dbatiste reviewed Feb 5, 2026

View reviewed changes

components/table/table-loading-backdrop.js Outdated Show resolved Hide resolved

Generalize into Loading Backdrop

ab4b394

Conversation

duncanuszkay-d2l commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo of the Daylight Docs

Demo of the component in practice:

Alternatives

Uh oh!

github-actions bot commented Feb 4, 2026

Uh oh!

duncanuszkay-d2l Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

duncanuszkay-d2l commented Feb 4, 2026 •

edited

Loading

duncanuszkay-d2l Feb 5, 2026 •

edited

Loading