etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-22 03:05:15 +00:00
Code Issues Projects Releases Wiki Activity

feat: pagination loader

Browse source
This commit is contained in:
Alex 2022-04-01 16:03:25 +13:00
parent d8c16f5456
commit 142afabda2
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
NUXT/components/vidLoadRenderer.vue
View file

@ -1,12 +1,14 @@
// this is an loading animation for videos
<template>
<div>
<v-sheet color="background" v-for="i in 10" :key="i">
<v-sheet color="background" v-for="i in count" :key="i">
<v-skeleton-loader type="image, list-item-avatar-two-line" />
</v-sheet>
</div>
</template>
<script>
export default {};
export default {
props: ["count"],
};
</script>

9
NUXT/pages/home.vue
View file

@ -7,10 +7,11 @@
<div>
<!-- Video Loading Animation -->
<vid-load-renderer v-if="recommends.length == 0" />
<vid-load-renderer v-if="recommends.length == 0" :count="10" />
<div v-for="(section, index) in recommends" :key="index">
<horizontal-list-renderer :render="section.contents[0]" />
</div>
<vid-load-renderer v-if="!loading" :count="1" />
<observer @intersect="paginate" />
</div>
</template>
@ -33,9 +34,14 @@ export default {
},
},
data: {
loading: false,
},
methods: {
paginate() {
if (this.recommends) {
this.loading = true;
this.$youtube
.recommendContinuation(
this.recommends[this.recommends.length - 1].continuations.find(
@ -44,6 +50,7 @@ export default {
"browse"
)
.then((result) => {
this.loading = false;
this.recommends.push(result);
});
}