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

@@ -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()
           }
         }