loading indication

Author: Rich-Harris

src/routes/tutorial/[slug]/_/Loading.svelte

@@ -1,4 +1,13 @@
+<script>
+	/** @type {boolean} */
+	export let initial;
+</script>
+
 <div class="loading">
+	{#if initial}
+		<p>Initializing WebContainer. This may take a few seconds</p>
+	{/if}
+
 	<svg width="107" height="128" viewBox="0 0 107 128">
 		<path
 			d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
@@ -19,12 +28,17 @@
 		top: 0;
 		left: 0;
 		display: flex;
+		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		background: #f9f9f9;
 		user-select: none;
 	}
 
+	p {
+		color: #999;
+	}
+
 	svg {
 		width: 100px;
 		height: 100px;

src/routes/tutorial/[slug]/index.svelte

@@ -47,6 +47,7 @@
 	/** @type {HTMLIFrameElement} */
 	let iframe;
 	let loading = true;
+	let initial = true;
 
 	/** @type {Record<string, boolean>}*/
 	let complete_states = {};
@@ -156,6 +157,7 @@
 		}
 
 		set_iframe_src(adapter.base);
+		initial = false;
 	});
 
 	/** @type {NodeJS.Timeout} */
@@ -372,7 +374,7 @@
 						<iframe bind:this={iframe} title="Output" />
 
 						{#if loading}
-							<Loading />
+							<Loading {initial} />
 						{/if}
 					</div>
 				</section>