marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-03-14 06:06: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

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

@ -1,6 +1,6 @@
<script>
export default {
data: function() {
data: function () {
return {
loading: false,
stream_data: [],
@ -25,7 +25,7 @@ export default {
this.loading = true;
let response = await this.$axios.get("/stream?start_index=" + this.start_idx + "&limit=" + this.limit);
if (response == null) {
this.loading = false
this.loadingError = true
@ -36,12 +36,16 @@ export default {
else this.stream_data = this.stream_data.concat(response.data);
this.loading = false;
},
scroll () {
loadMore() {
this.start_idx += this.limit
this.loadContent()
},
scroll() {
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) {
this.start_idx += this.limit;
this.loadContent();
this.loadMore()
}
}
},
@ -66,13 +70,8 @@ export default {
</div>
<div id="main-content" v-for="item of stream_data">
<PostCard :user_id="item.user_id"
:photo_id="item.photo_id"
:name="item.name"
:date="item.date"
:comments="item.comments"
:likes="item.likes"
:liked="item.liked" />
<PostCard :user_id="item.user_id" :photo_id="item.photo_id" :name="item.name" :date="item.date"
:comments="item.comments" :likes="item.likes" :liked="item.liked" />
</div>
<div v-if="data_ended" class="alert alert-secondary text-center" role="alert">
@ -80,7 +79,13 @@ export default {
</div>
<LoadingSpinner :loading="loading" /><br />
<button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button>
<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="(!data_ended && !loading)" @click="loadMore" class="btn btn-secondary py-1 mb-5"
style="border-radius: 15px">Load more</button>
</div>
</div>
</div>
</div>

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

@ -54,12 +54,17 @@ export default {
this.loading = false;
},
loadMore() {
this.start_idx += this.limit
this.loadContent()
},
scroll() {
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) {
this.start_idx += this.limit;
this.loadContent();
this.start_idx += this.limit
this.loadMore()
}
}
},
@ -113,8 +118,14 @@ export default {
You reached the end. Hooray! 👻
</div>
<LoadingSpinner :loading="loading" /><br />
<button v-if="loadingError" @click="refresh" class="btn btn-secondary w-100 py-3">Retry</button>
<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="(!data_ended && !loading)" @click="loadMore" class="btn btn-secondary py-1 mb-5"
style="border-radius: 15px">Load more</button>
</div>
</div>
</div>
</div>