Progress bar for scene loading (#71)

studio-web/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./lib/canvas-provider.element";
+export * from "./lib/loading.element";
 export * from "./lib/scene-hierarchy.element";
 export * from "./lib/studio.element";
 export * from "./lib/transform-toolbar.element";

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

@@ -0,0 +1,23 @@
+:host {
+	position: fixed;
+	inset: 0;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+
+	background: #1A1A27;
+	color: #FFF;
+
+	font: {
+		family: "Fira Sans", sans-serif;
+		weight: 700;
+	}
+}
+
+.progress {
+	width: 512px;
+	border-radius: 0.25rem;
+}

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>
+	`;
+}