Progress bar for scene loading (#71)

image-generator-demo/src/app/app.element.scss

@@ -166,17 +166,3 @@
 	background: transparent;
 	color: #FFFC;
 }
-
-.loading {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: #222;
-	color: #FFF;
-	font: {
-		family: "Fira Sans", sans-serif;
-		weight: 700;
-	}
-}

image-generator-demo/src/app/app.element.ts

@@ -16,6 +16,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { ImageInfo, LcmClient } from "./lcm-client";
 
 import "@storyteller/studio-web/canvas-provider";
+import "@storyteller/studio-web/loading";
 import "@storyteller/studio-web/scene-hierarchy";
 import "@storyteller/studio-web/studio";
 import "@storyteller/studio-web/transform-toolbar";
@@ -293,10 +294,7 @@ export class AppElement extends LitElement {
 			nothing}
 
 			${this.loading ? html`
-				<!-- TODO: Animated spinner or something -- talk to our designers -->
-				<div class="loading">
-					<h1>Loading</h1>
-				</div>
+				<sts-loading></sts-loading>
 			` : nothing}
 		</sts-canvas-provider>
 	`