Niquarl/joinpeertube
1
0
Fork 0
forked from nutomic/joinpeertube
Code Issues Pull requests Releases Wiki Activity

Add loading animation to instances list

Browse source
This commit is contained in:
Chocobozzz 2019-10-30 16:41:53 +01:00
parent 2222b37883
commit af928df94d
No known key found for this signature in database
GPG key ID: 583A612D890159BE
1 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/InstancesList.vue
View file

@ -103,7 +103,13 @@
</div> </div>
<div class="list"> <div class="list">
<div v-translate class="title">Instances list</div> <div class="title">
<translate>Instances list</translate>
<transition name="mascot-loading">
<img v-bind:class="{ animate: loadingAnimation }" v-on:animationend="loadingAnimation = false" class="mascot-loading" :src="buildImgUrl('mascot/happy.png')" alt="PeerTube mascot">
</transition>
</div>
<div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }"> <div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }">
<div v-for="instance of instances" class="instance" :key="instance.host"> <div v-for="instance of instances" class="instance" :key="instance.host">
@ -250,7 +256,9 @@
.list { .list {
.title { .title {
margin-bottom: 50px; height: 150px;
display: flex;
align-items: center;
} }
.instance { .instance {
@ -262,6 +270,32 @@
} }
} }
.mascot-loading {
display: none;
@media screen and (min-width: $responsive-screen) {
&.animate {
display: block;
animation: mascotLoadingAnimation 1s normal ease-out;
@keyframes mascotLoadingAnimation {
0% {
margin-left: 0;
}
50% {
opacity: 1;
}
100% {
margin-left: calc(100% - 300px);
opacity: 0;
}
}
}
}
}
@media screen and (max-width: $responsive-screen) { @media screen and (max-width: $responsive-screen) {
.custom-checkbox { .custom-checkbox {
.custom-control-label > span { .custom-control-label > span {
@ -296,6 +330,7 @@
return { return {
error: false, error: false,
noResults: false, noResults: false,
loadingAnimation: false,
instances: [], instances: [],
translatedThemes: { translatedThemes: {
@ -418,6 +453,7 @@
fetchInstances () { fetchInstances () {
this.noResults = false this.noResults = false
this.loadingAnimation = true
const params = { const params = {
start: 0, start: 0,
@ -427,7 +463,7 @@
if (this.wantTo === 'create-account') params.signup = true if (this.wantTo === 'create-account') params.signup = true
if (this.themes.length !== 0) params.categoriesOr = this.themes if (this.themes.length !== 0) params.categoriesOr = this.themes
if (this.nsfw !== 'no-opinion') params.nsfwPolicy = [ this.nsfw ] if (this.nsfw !== 'no-opinion') params.nsfwPolicy = [this.nsfw]
if (this.languages.length !== 0) params.languagesOr = this.languages if (this.languages.length !== 0) params.languagesOr = this.languages
if (this.isQuotaEnabled()) params.minUserQuota = this.quota if (this.isQuotaEnabled()) params.minUserQuota = this.quota