parent f744666

author Simon Tretter <simllll@users.noreply.github.com> 1557759137 +0200
committer simon <s.tretter@gmail.com> 1557760081 +0200

allows $loading indicator throttling

Problem:
Right now the loading indicator is shown even for very short request. Which results in a "flashing" that looks more like a bug than a feature ;)

Reason & Solution:
when using .set on $loading it shows immediately the loading indicator. (see nuxt-loading.vue) The indicator itself has a throttle property though (which is only checked on .start()). As long as we only have one request, there is no additional benefit of using .set directly, therefore we can rely on the throttle parameter by using start() instead.

Different approach:
Another approach would be implementing our own "throttle" method which sets a timer on "onRequest" when it's not set) or currentRequests === 0), and removes the timer again onResponse when currentRequests <= 0.
But then we need another config option for the throttling param, or can we access the one from nuxt.config's loading property somehow?

Regards
Simon

lib/plugin.js

@@ -111,6 +111,9 @@ const setupProgress = (axios, ctx) => {
     }
 
     currentRequests++
+    if (currentRequests === 1) {
+      $loading().start()
+    }
   })
 
   axios.onResponse(response => {
@@ -139,8 +142,10 @@ const setupProgress = (axios, ctx) => {
     if (!currentRequests) {
       return
     }
-    const progress = ((e.loaded * 100) / (e.total * currentRequests))
-    $loading().set(Math.min(100, progress))
+    if (currentRequests > 1) {
+      const progress = ((e.loaded * 100) / (e.total * currentRequests))
+      $loading().set(Math.min(100, progress))
+    }
   }
 
   axios.defaults.onUploadProgress = onProgress