marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-03-14 14:16:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve lazy loading

Browse source
This commit is contained in:
Marco Realacci 2022-12-15 14:46:27 +01:00
parent 92522876b7
commit 3e4c28123e
2 changed files with 35 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
webui/src/views/HomeView.vue
View file

@ -36,12 +36,16 @@ export default {
else this.stream_data = this.stream_data.concat(response.data); else this.stream_data = this.stream_data.concat(response.data);
this.loading = false; this.loading = false;
}, },
loadMore() {
this.start_idx += this.limit
this.loadContent()
},
scroll() { scroll() {
window.onscroll = () => { window.onscroll = () => {
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight >= document.documentElement.offsetHeight - 5
if (bottomOfWindow && !this.data_ended) { if (bottomOfWindow && !this.data_ended) {
this.start_idx += this.limit; this.loadMore()
this.loadContent();
} }
} }
}, },
@ -66,13 +70,8 @@ export default {
</div> </div>
<div id="main-content" v-for="item of stream_data"> <div id="main-content" v-for="item of stream_data">
<PostCard :user_id="item.user_id" <PostCard :user_id="item.user_id" :photo_id="item.photo_id" :name="item.name" :date="item.date"
:photo_id="item.photo_id" :comments="item.comments" :likes="item.likes" :liked="item.liked" />
:name="item.name"
:date="item.date"
:comments="item.comments"
:likes="item.likes"
:liked="item.liked" />
</div> </div>
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert"> <div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
@ -80,7 +79,13 @@ export default {
</div> </div>
<LoadingSpinner :loading="loading" /><br /> <LoadingSpinner :loading="loading" /><br />
<div class="d-flex align-items-center flex-column">
<button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button> <button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button>
<button v-if="(!data_ended && !loading)" @click="loadMore" class="btn btn-secondary py-1 mb-5"
style="border-radius: 15px">Load more</button>
</div>
</div> </div>
</div> </div>
</div> </div>

19
webui/src/views/ProfileView.vue
View file

@ -54,12 +54,17 @@ export default {
this.loading = false; this.loading = false;
}, },
loadMore() {
this.start_idx += this.limit
this.loadContent()
},
scroll() { scroll() {
window.onscroll = () => { window.onscroll = () => {
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight >= document.documentElement.offsetHeight - 5
if (bottomOfWindow && !this.data_ended) { if (bottomOfWindow && !this.data_ended) {
this.start_idx += this.limit; this.start_idx += this.limit
this.loadContent(); this.loadMore()
} }
} }
}, },
@ -113,8 +118,14 @@ export default {
You reached the end. Hooray! 👻 You reached the end. Hooray! 👻
</div> </div>
<LoadingSpinner :loading="loading" /><br /> <LoadingSpinner :loading="loading" />
<div class="d-flex align-items-center flex-column">
<button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button> <button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button>
<button v-if="(!data_ended && !loading)" @click="loadMore" class="btn btn-secondary py-1 mb-5"
style="border-radius: 15px">Load more</button>
</div>
</div> </div>
</div> </div>
</div> </div>