From 7a405140db6f0d51076e33368f8409589c985577 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Thu, 26 Dec 2019 01:26:46 +0100
Subject: [PATCH] Loading var for loader start  and more header info.

New loading var for holding the state of the request. This makes it
easier to show the loading and an error if the result is empty but the
request is finished.
More header info! The header now displays list elements of info in a
column on the right side of header. Used here for result and page
current and total count.
---
 src/components/ListPage.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ListPage.vue b/src/components/ListPage.vue
index dfb7ee4..95289d5 100644
--- a/src/components/ListPage.vue
+++ b/src/components/ListPage.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div>
-    <list-header :title="listTitle" :info="resultCount" :sticky="true" />
+    <list-header :title="listTitle" :info="info" :sticky="true" />
 
     <results-list :results="results" v-if="results" />
 
@@ -30,7 +30,8 @@ export default {
       results: [],
       page: 1,
       totalPages: 0,
-      totalResults: 0
+      totalResults: 0,
+      loading: true
     }
   },
   computed: {
@@ -42,18 +43,24 @@ export default {
       console.log('routelistname', routeListName)
       return routeListName.includes('_') ? routeListName.split('_').join(' ') : routeListName
     },
-    resultCount() {
+    info() {
       if (this.results.length === 0)
-        return ''
-
+        return [null, null]
+      return [this.pageCount, this.resultCount]
+    },
+    resultCount() {
       const loadedResults = this.results.length
       const totalResults = this.totalResults < 10000 ? this.totalResults : '∞'
       return `${loadedResults} of ${totalResults} results`
+    },
+    pageCount() {
+      return `Page ${this.page} of ${this.totalPages}`
     }
   },
   methods: {
     loadMore() {
       console.log(this.$route)
+      this.loading = true;
       this.page++
 
       window.history.replaceState({}, 'search', `/#/${this.$route.fullPath}?page=${this.page}`)
@@ -82,6 +89,8 @@ export default {
         // TODO handle if list is not found
         console.log('404 this is not a tmdb list')
       }
+
+      this.loading = false
     }
   },
   created() {