{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/preventing-loading-progress-bar-flashes-with-vue","result":{"data":{"allGhostPost":{"edges":[{"node":{"title":"Preventing Loading Progress Bar Flashes with Vue.js","html":"<h2 id=\"the-problem\">The Problem</h2><p>You're using a loading progress bar like the one shown below, but your website is fast enough for it to flash for a few milliseconds and disappear near instantly. This can make users feel that your website is slower than it actually is.</p><div style=\"text-align:center;\"><img alt=\"NProgress demo\" width=\"746px\" src=\"https://kmln.sr/DSUzT40\"></div><h2 id=\"the-solution\">The Solution</h2><p>Display a progress bar only if the request takes \"too long.\" A good duration to use 200ms.</p><h2 id=\"the-code\">The Code</h2><pre><code>const progressFns = () =&gt; {\n    let progressTimeout, count = 0\n\n    const start = () =&gt; {\n        count++\n\n        progressTimeout = setTimeout(() =&gt; {\n            NProgress.start()\n        }, 200)\n    }\n\n    const stop = () =&gt; {\n        count = Math.max(0, count - 1)\n        if (count &gt; 0) return\n\n        NProgress.done()\n        clearTimeout(progressTimeout)\n    }\n\n    return { start, stop }\n}</code></pre><p><code>progressFns</code> returns an object with two functions:</p><ul><li><code>start</code> to queue the progress bar for display after 200ms</li><li><code>stop</code> to hide the progress bar</li></ul><p>It also keeps track of how many requests are in progress and only hides the bar when the last one is done. Usually you would intercept your request library and/or Vue Router's requests and show/hide the progress bar as needed.</p><h3 id=\"usage\">Usage</h3><p>Get instances of the functions:</p><pre><code>const {\n    start: progressStart,\n    stop: progressStop,\n} = progressFns()</code></pre><h4 id=\"vue-js\">Vue.js</h4><pre><code>router.beforeResolve((to, from, next) =&gt; {\n    if (to.name) {\n        progressStart()\n    }\n\n    next()\n})\n\nrouter.afterEach((to, from) =&gt; {\n    progressStop()\n})</code></pre><h4 id=\"axios\">Axios</h4><pre><code>window.axios.interceptors.request.use(config =&gt; {\n    if (!config.__noProgress) progressStart()\n\n    return config\n}, error =&gt; {\n    progressStop()\n\n    return Promise.reject(error)\n})\n\nwindow.axios.interceptors.response.use(response =&gt; {\n    if (!response.config.__noProgress) progressStop()\n\n    return response\n}, error =&gt; {\n    progressStop()\n\n    return Promise.reject(error)\n})</code></pre><p>Checking <code>config.__noProgress</code> lets me selectively disable the progress bar completely for certain requests, like so:</p><pre><code>axios\n    .get(\"/auth/me\", { __noProgress: true })\n    ...</code></pre><p>Thanks to Next.js 7 for making me aware of this!<br><a href=\"https://github.com/jamiebuilds/react-loadable#avoiding-flash-of-loading-component\">https://github.com/jamiebuilds/react-loadable#avoiding-flash-of-loading-component</a></p>","published_at":"2018-09-26T17:17:52.000+03:00","slug":"preventing-loading-progress-bar-flashes-with-vue","tags":[],"plaintext":"The Problem\nYou're using a loading progress bar like the one shown below, but your website\nis fast enough for it to flash for a few milliseconds and disappear near\ninstantly. This can make users feel that your website is slower than it actually\nis.\n\nThe Solution\nDisplay a progress bar only if the request takes \"too long.\" A good duration to\nuse 200ms.\n\nThe Code\nconst progressFns = () => {\n    let progressTimeout, count = 0\n\n    const start = () => {\n        count++\n\n        progressTimeout = setTimeout(() => {\n            NProgress.start()\n        }, 200)\n    }\n\n    const stop = () => {\n        count = Math.max(0, count - 1)\n        if (count > 0) return\n\n        NProgress.done()\n        clearTimeout(progressTimeout)\n    }\n\n    return { start, stop }\n}\n\nprogressFns  returns an object with two functions:\n\n * start  to queue the progress bar for display after 200ms\n * stop  to hide the progress bar\n\nIt also keeps track of how many requests are in progress and only hides the bar\nwhen the last one is done. Usually you would intercept your request library\nand/or Vue Router's requests and show/hide the progress bar as needed.\n\nUsage\nGet instances of the functions:\n\nconst {\n    start: progressStart,\n    stop: progressStop,\n} = progressFns()\n\nVue.js\nrouter.beforeResolve((to, from, next) => {\n    if (to.name) {\n        progressStart()\n    }\n\n    next()\n})\n\nrouter.afterEach((to, from) => {\n    progressStop()\n})\n\nAxios\nwindow.axios.interceptors.request.use(config => {\n    if (!config.__noProgress) progressStart()\n\n    return config\n}, error => {\n    progressStop()\n\n    return Promise.reject(error)\n})\n\nwindow.axios.interceptors.response.use(response => {\n    if (!response.config.__noProgress) progressStop()\n\n    return response\n}, error => {\n    progressStop()\n\n    return Promise.reject(error)\n})\n\nChecking config.__noProgress  lets me selectively disable the progress bar\ncompletely for certain requests, like so:\n\naxios\n    .get(\"/auth/me\", { __noProgress: true })\n    ...\n\nThanks to Next.js 7 for making me aware of this!\nhttps://github.com/jamiebuilds/react-loadable#avoiding-flash-of-loading-component","meta_description":null}}]}},"pageContext":{"slug":"preventing-loading-progress-bar-flashes-with-vue","prev":"how-to-set-global-shortcut-open-new-iterm2-window","next":"routing-urls-to-openfaas-functions"}},"staticQueryHashes":["3649515864"]}