Make pagination-bar hiding more seamless

Now, it goes away the moment JavaScript is loaded, and also fades
out nicely even if you do happen to look at it. The extraneous
console.log messages are also gone.
This commit is contained in:
Badri Sunderarajan 2020-03-15 12:19:45 +05:30
parent 0ae46197b6
commit 9be6baae52
1 changed files with 6 additions and 6 deletions

View File

@ -37,7 +37,9 @@
</div>
</infinite-loading>
</ClientOnly>
<Pager v-if="!infiniteLoadingActivated" :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
<transition name="fade">
<Pager v-show="!infiniteLoadingActivated" :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
</transition>
</div>
</main>
</Layout>
@ -113,24 +115,22 @@
this.loadedPosts.push(...this.$page.posts.edges)
this.infiniteLoadingActivated = false
},
mounted() {
this.infiniteLoadingActivated = true
},
methods: {
async infiniteHandler($state) {
console.log('Fetching infinite.')
this.infiniteLoadingActivated = true
if (this.currentPage + 1 > this.$page.posts.pageInfo.totalPages) {
console.log('State complete.')
$state.complete()
} else {
const { data } = await this.$fetch(
`/${this.currentPage + 1}`
)
if (data.posts.edges.length) {
console.log('Pushing next posts')
this.currentPage = data.posts.pageInfo.currentPage
this.loadedPosts.push(...data.posts.edges)
$state.loaded()
} else {
console.log('Bad data: state complete')
$state.complete()
}
}