adrinux
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add fade to loading spinner

This commit is contained in:
kolaente 2021-10-31 21:48:07 +01:00
parent e2cc505564
commit acc315b581
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/misc/ready.vue
View File

@ -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;