Better progress handling

src/components/Suggestions.vue

@@ -2,18 +2,26 @@
   <div>
     <ul class="collection with-header">
       <li class="collection-header">
-        <h4>Connected accounts</h4>
+        <router-link to="/connect" class="secondary-content">Add another account</router-link>
+        <h5>Connected accounts</h5>
       </li>
       <li class="collection-item avatar" v-for="account in accounts" :key="account.id">
         <img v-if="account._source.getAvatar(account)" :src="account._source.getAvatar(account)" alt="" class="circle">
         <span class="title">{{ account._source.getDisplayName(account) }}</span>
         <p>{{ account._source.label }}</p>
-        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
+        <div v-if="isLoading && results[account.id] && results[account.id].results.isLoading">
+          <div class="progress">
+            <div v-if="results[account.id].results.progress === 'indeterminate'" :class="indeterminate"></div>
+            <div v-else class="determinate" :style="{width: `${results[account.id].results.progress}%`}"></div>
+          </div>
+          {{ results[account.id].results.status }}
+        </div>
+        <a @click="fetch(account.id)" class="secondary-content"><i class="material-icons">refresh</i></a>
       </li>
     </ul>
     <h2>Suggestions</h2>
     <button
-      @click="fetch"
+      @click="fetch()"
       :class="['waves-effect', 'waves-light', {disabled: isLoading}, 'btn-small']" :disabled="isLoading">
       <i class="material-icons left">refresh</i>Fetch data
     </button>
@@ -42,10 +50,18 @@ export default {
     }
   },
   methods: {
-    async fetch () {
+    async fetch (id) {
+      let accounts
+      if (id) {
+        accounts = this.accounts.filter((a) => {
+          return a.id == id
+        })
+      } else {
+        accounts = this.accounts
+      }
       this.isLoading = true
-      this.accounts.forEach((a) => {
-        let r = {}
+      accounts.forEach((a) => {
+        let r = {isLoading: true, progress: 'indeterminate', status: ''}
         let promise = a._source.fetch({account: a, store: this.$store, results: r, vue: this})
         this.$set(this.results, a.id, {account: a, promise, results: r})
       })

src/sources/mastodon.js

@@ -83,7 +83,7 @@ export default {
     router.push({path: '/'})
   },
   async fetch ({account, cache, store, results, vue}) {
-    console.log(`Fetching favorites for ${account.id}...`)
+    vue.$set(results, 'status', `Fetching favorites...`)
     const token = store.state.sources.mastodon.appTokens[`${account.username}@${account.domain}`].access_token
     const client = axios.create({
       baseURL: `https://${account.domain}`,
@@ -92,6 +92,7 @@ export default {
     const maxFavorites = 100
     let url = '/api/v1/favourites'
     let handledFavorites = 0
+    results.progress = 0
     vue.$set(results, 'accounts', {})
     while (handledFavorites < maxFavorites) {
       let response = await client.get(url, {params: {limit: 40}})
@@ -103,6 +104,7 @@ export default {
         } else {
           results.accounts[account] = 1
         }
+        results.progress = Math.min(100, results.progress + 1)
       })
       let link = response.headers.link || ''
       let parsed = parseLink(link)
@@ -113,6 +115,7 @@ export default {
       }
       vue.$set(results, 'status', `Fetched favorites ${handledFavorites}/${maxFavorites}`)
     }
+    results.isLoading = false
     return results
   }
 }