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

View file

@ -37,7 +37,9 @@
</div> </div>
</infinite-loading> </infinite-loading>
</ClientOnly> </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> </div>
</main> </main>
</Layout> </Layout>
@ -113,24 +115,22 @@
this.loadedPosts.push(...this.$page.posts.edges) this.loadedPosts.push(...this.$page.posts.edges)
this.infiniteLoadingActivated = false this.infiniteLoadingActivated = false
}, },
mounted() {
this.infiniteLoadingActivated = true
},
methods: { methods: {
async infiniteHandler($state) { async infiniteHandler($state) {
console.log('Fetching infinite.')
this.infiniteLoadingActivated = true
if (this.currentPage + 1 > this.$page.posts.pageInfo.totalPages) { if (this.currentPage + 1 > this.$page.posts.pageInfo.totalPages) {
console.log('State complete.')
$state.complete() $state.complete()
} else { } else {
const { data } = await this.$fetch( const { data } = await this.$fetch(
`/${this.currentPage + 1}` `/${this.currentPage + 1}`
) )
if (data.posts.edges.length) { if (data.posts.edges.length) {
console.log('Pushing next posts')
this.currentPage = data.posts.pageInfo.currentPage this.currentPage = data.posts.pageInfo.currentPage
this.loadedPosts.push(...data.posts.edges) this.loadedPosts.push(...data.posts.edges)
$state.loaded() $state.loaded()
} else { } else {
console.log('Bad data: state complete')
$state.complete() $state.complete()
} }
} }