Progress bar for scene loading (#71)

studio-web/src/lib/loading.element.ts

@@ -0,0 +1,39 @@
+import { on } from "@storyteller/framework";
+import { type LoadingQueueEvent } from "@storyteller/studio";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import "@storyteller/studio-ui/progress";
+
+import styles from "./loading.element.scss?inline";
+
+@customElement("sts-loading")
+export class LoadingElement extends LitElement {
+	static override styles = unsafeCSS(styles);
+
+	@state() queueMax = 0;
+	@state() queueLoaded = 0;
+
+	override connectedCallback(): void {
+		this.queueMax = 0;
+		this.queueLoaded = 0;
+		super.connectedCallback();
+	}
+
+	@on("window:loading-queue")
+	onLoadingQueue({ detail: queueLen }: LoadingQueueEvent): void {
+		this.queueMax = Math.max(queueLen, this.queueMax);
+		this.queueLoaded = this.queueMax - queueLen;
+	}
+
+	protected override render = () => html`
+		<h1 id="loading-label">Loading</h1>
+
+		<sts-progress class="progress"
+			aria-labelledby="loading-label"
+			?indeterminate=${this.queueMax === 0}
+			.max=${this.queueMax}
+			.value=${this.queueLoaded}
+		></sts-progress>
+	`;
+}