From 5653c6cd8696d2ac2265dfb7a2804467d87b77d2 Mon Sep 17 00:00:00 2001 From: Simon Tretter Date: Mon, 13 May 2019 16:52:17 +0200 Subject: [PATCH] fix(loading): allows $loading indicator throttling f744666a69776ef103b05e07c4ff7e5ca55e7344 author Simon Tretter 1557759137 +0200 committer simon 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 | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/lib/plugin.js b/lib/plugin.js index 448065e6..cc623c81 100644 --- 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