From 9be6baae52fc75d554bb489e0faaa40bc093ff2c Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Sun, 15 Mar 2020 12:19:45 +0530
Subject: [PATCH] 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.
---
 src/pages/Index.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index d3986ae..a1e23f8 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -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()
           }
         }