display a skeleton layout while dynamic views are loading

2 files changed, 19 insertions, 2 deletions

diff --git a/src/App.vue b/src/App.vue
index 435f7b2..f46f063 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,11 @@
 <template>
 	<Logo class="header"/>
 	<Navigation class="nav"/>
-	<router-view class="content"/>
+	<router-view v-if="loaded" class="content"/>
+	<main v-else class="content" role="alert" aria-busy="true">
+		<h1>&nbsp;</h1>
+		<p>Loading...</p>
+	</main>
 	<Copyright class="footer"/>
 </template>
 
@@ -84,5 +88,13 @@ import Copyright from "@/components/Footer.vue";
 		Copyright,
 	},
 })
-export default class AppV extends Vue {}
+export default class AppV extends Vue {
+	loaded = false;
+
+	mounted () {
+		self.addEventListener("initial-load", () => {
+			this.loaded = true;
+		});
+	}
+}
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 8165667..04828e4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,6 +49,11 @@ const router = createRouter({
 	routes,
 });
 
+router.beforeResolve((to, from, next) => {
+	self.dispatchEvent(new Event("initial-load"));
+	next();
+});
+
 router.afterEach((to,) => {
 	const mainTitle = document.querySelector("#app > .content > h1");