diff options
author | Helianthella <git@gumi.ca> | 2020-12-25 21:00:29 -0500 |
---|---|---|
committer | Helianthella <git@gumi.ca> | 2020-12-25 21:05:54 -0500 |
commit | 965059649ff6de8849f5091435befddba18ced93 (patch) | |
tree | ed8d61f1451fb943fe82e91e3c517d97231f1e92 /src/App.vue | |
parent | aa43f570ae5fe19f3405bff9c800bcaa442c0f33 (diff) | |
download | website-965059649ff6de8849f5091435befddba18ced93.tar.gz website-965059649ff6de8849f5091435befddba18ced93.tar.bz2 website-965059649ff6de8849f5091435befddba18ced93.tar.xz website-965059649ff6de8849f5091435befddba18ced93.zip |
display a skeleton layout while dynamic views are loading
Diffstat (limited to 'src/App.vue')
-rw-r--r-- | src/App.vue | 16 |
1 files changed, 14 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> </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> |