The LoadingCompleteMixin contains boilerplate code for getLoadingComplete. It simplifies fixture setup for custom components in automated tests, and provides a loadingComplete promise that can be used internally.

Apply the mixin and call resolveLoadingComplete() once your component has finished loading

import { LoadingCompleteMixin } from '@brightspace-ui/core/mixins/loading-complete/loading-complete-mixin.js';

class MyComponent extends LoadingCompleteMixin(LitElement) {

	connectedCallback() {
		this._fetchMyData().then(this.resolveLoadingComplete);
	}

}

To make use of the loadingComplete promise, simply await it where needed:

async removeSkeleton() {
	await this.loadingComplete;
	this.skeleton = false;
}

If for any reason resolveLoadingComplete is never called, loadingComplete won't resolve and any consumers will hang. A warning will be thrown indicating that the component has entered a bad state.

In some cases, instead of finding one spot to call resolveLoadingComplete, you may find it easier to await a set of promises in a custom getLoadingComplete method.

You'll also need to use this method if you're working in a general-use mixin rather than directly in a component.

class MyComponent extends LoadingCompleteMixin(LitElement) {

	async getLoadingComplete() {
		await super.getLoadingComplete();
		await this._myCustomIconImport;
		await Promise.all(this._allMyDataPromises);
	}
}

Note that the work to generate these promises should have already started, before firstUpdated, and we simply await them here.