fix(loading): allows $loading indicator throttling f744666

author Simon Tretter <[email protected]> 1557759137 +0200 committer simon <[email protected]> 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
nuxt-community · May 13, 2019 · 5653c6c · 5653c6c
1 parent f744666
commit 5653c6c
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/lib/plugin.js b/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