From acc315b581f2faae3b0ea5d2e7b43d49338c7317 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 31 Oct 2021 21:48:07 +0100
Subject: [PATCH] feat: add fade to loading spinner

---
 src/components/misc/ready.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index 06f76903d..24a52e9c2 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -18,13 +18,15 @@
 			</card>
 		</no-auth-wrapper>
 	</section>
-	<section class="vikunja-loading" v-else>
-		<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
-		<p>
-			<span class="loader-container is-loading-small is-loading"></span>
-			{{ $t('ready.loading') }}
-		</p>
-	</section>
+	<transition name="fade">
+		<section class="vikunja-loading" v-if="showLoading">
+			<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
+			<p>
+				<span class="loader-container is-loading-small is-loading"></span>
+				{{ $t('ready.loading') }}
+			</p>
+		</section>
+	</transition>
 </template>
 
 <script>
@@ -51,6 +53,9 @@ export default {
 		ready() {
 			return this.$store.state.vikunjaReady
 		},
+		showLoading() {
+			return !this.ready || this.error !== ''
+		},
 	},
 	methods: {
 		load() {
@@ -71,6 +76,13 @@ export default {
 	height: 100vh;
 	width: 100vw;
 	flex-direction: column;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background: $grey-100;
+	z-index: 99;
 
 	img {
 		margin-bottom: 1rem;