feat: add fade to loading spinner
continuous-integration/drone/pr Build is failing
Details
continuous-integration/drone/pr Build is failing
Details
This commit is contained in:
parent
e2cc505564
commit
acc315b581
|
@ -18,13 +18,15 @@
|
||||||
</card>
|
</card>
|
||||||
</no-auth-wrapper>
|
</no-auth-wrapper>
|
||||||
</section>
|
</section>
|
||||||
<section class="vikunja-loading" v-else>
|
<transition name="fade">
|
||||||
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
|
<section class="vikunja-loading" v-if="showLoading">
|
||||||
<p>
|
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
|
||||||
<span class="loader-container is-loading-small is-loading"></span>
|
<p>
|
||||||
{{ $t('ready.loading') }}
|
<span class="loader-container is-loading-small is-loading"></span>
|
||||||
</p>
|
{{ $t('ready.loading') }}
|
||||||
</section>
|
</p>
|
||||||
|
</section>
|
||||||
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -51,6 +53,9 @@ export default {
|
||||||
ready() {
|
ready() {
|
||||||
return this.$store.state.vikunjaReady
|
return this.$store.state.vikunjaReady
|
||||||
},
|
},
|
||||||
|
showLoading() {
|
||||||
|
return !this.ready || this.error !== ''
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
load() {
|
load() {
|
||||||
|
@ -71,6 +76,13 @@ export default {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background: $grey-100;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
|
Reference in New Issue