@brightspace-ui/core 3.79.0 → 3.79.1

package/components/empty-state/empty-state-illustrated.js

@@ -2,6 +2,7 @@ import { emptyStateIllustratedStyles, emptyStateStyles } from './empty-state-sty
 import { html, LitElement, nothing } from 'lit';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { LoadingCompleteMixin } from '../../mixins/loading-complete/loading-complete-mixin.js';
 import { loadSvg } from '../../generated/empty-state/presetIllustrationLoader.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -16,7 +17,7 @@ const illustrationAspectRatio = 500 / 330;
  * @slot - Slot for empty state actions
  * @slot illustration - Slot for custom SVG content if `illustration-name` property is not set
  */
-class EmptyStateIllustrated extends PropertyRequiredMixin(LitElement) {
+class EmptyStateIllustrated extends LoadingCompleteMixin(PropertyRequiredMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -53,35 +54,41 @@ class EmptyStateIllustrated extends PropertyRequiredMixin(LitElement) {
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener('d2l-empty-state-illustrated-check', this._handleEmptyStateIllustratedCheck);
+		this.addEventListener('d2l-empty-state-illustrated-check', this.#handleEmptyStateIllustratedCheck);
 		this._resizeObserver.observe(this);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener('d2l-empty-state-illustrated-check', this._handleEmptyStateIllustratedCheck);
+		this.removeEventListener('d2l-empty-state-illustrated-check', this.#handleEmptyStateIllustratedCheck);
 		this._resizeObserver.disconnect();
 	}
 
 	render() {
-		const illustrationContainerStyle = this._getIllustrationContainerStyle();
-		const titleClass = this._getTitleClass();
+		const titleClass = {
+			'd2l-empty-state-title': true,
+			'd2l-empty-state-title-small': this._titleSmall,
+			'd2l-empty-state-title-large': !this._titleSmall,
+		};
 
 		return html`
-			${this.illustrationName
-		? html`
-			<div style="${styleMap(illustrationContainerStyle)}">
-				${runAsync(this.illustrationName, () => this._getIllustration(this.illustrationName), { success: (illustration) => illustration }, { pendingState: false })}
-			</div>`
-		: html`<slot class="illustration-slot" name="illustration"></slot>`}
-
+			${this.#renderIllustration()}
 			<p class="${classMap(titleClass)}">${this.titleText}</p>
 			<p class="d2l-body-compact d2l-empty-state-description">${this.description}</p>
 			<slot class="action-slot"></slot>
 		`;
 	}
 
-	async _getIllustration(illustrationName) {
+	_onResize(entries) {
+		if (!entries || entries.length === 0) return;
+		const entry = entries[0];
+		requestAnimationFrame(() => {
+			this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
+			this._titleSmall = entry.contentRect.right <= 615;
+		});
+	}
+
+	async #getIllustration(illustrationName) {
 		if (!illustrationName) return;
 
 		const svg = await loadSvg(illustrationName);
@@ -91,32 +98,31 @@ class EmptyStateIllustrated extends PropertyRequiredMixin(LitElement) {
 		return svg ? html`${unsafeSVG(svg.val)}` : nothing;
 	}
 
-	_getIllustrationContainerStyle() {
-		return {
-			height: `${this._contentHeight}px`,
-		};
-	}
-
-	_getTitleClass() {
-		return {
-			'd2l-empty-state-title': true,
-			'd2l-empty-state-title-small': this._titleSmall,
-			'd2l-empty-state-title-large': !this._titleSmall,
-		};
-	}
-
-	_handleEmptyStateIllustratedCheck(e) {
+	#handleEmptyStateIllustratedCheck(e) {
 		e.stopPropagation();
 		e.detail.illustrated = true;
 	}
 
-	_onResize(entries) {
-		if (!entries || entries.length === 0) return;
-		const entry = entries[0];
-		requestAnimationFrame(() => {
-			this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
-			this._titleSmall = entry.contentRect.right <= 615;
-		});
+	#renderIllustration() {
+		if (!this.illustrationName) {
+			this.resolveLoadingComplete();
+			return html`<slot class="illustration-slot" name="illustration"></slot>`;
+		}
+		const illustrationContainerStyle = {
+			height: `${this._contentHeight}px`,
+		};
+		const asyncVal = runAsync(
+			this.illustrationName,
+			() => this.#getIllustration(this.illustrationName),
+			{
+				success: illustration => {
+					this.resolveLoadingComplete();
+					return illustration;
+				}
+			},
+			{ pendingState: false }
+		);
+		return html`<div style="${styleMap(illustrationContainerStyle)}">${asyncVal}</div>`;
 	}
 
 }

package/custom-elements.json

@@ -3742,6 +3742,14 @@
           "attribute": "title-text",
           "description": "REQUIRED: A title for the empty state",
           "type": "string"
+        },
+        {
+          "name": "loadingComplete",
+          "type": "Promise<any>"
+        },
+        {
+          "name": "resolveLoadingComplete",
+          "type": "() => void"
         }
       ],
       "slots": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.79.0",
+  "version": "3.79.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",