title: Wait for some time before showing loading screen VueJS
body: <p>In <strong>VueJS</strong>, I am showing the loader on each route as:</p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
    store.commit('loading', true);
    next();
  })
  </code></pre>
  
  <p>But if server loads the page in less than one second then it looks weird to show loader for this request, for just one sec.</p>
  
  <p>What I want to wait for some time let just say 2sec or maybe 3sec and after all, if the page is not loaded yet then show loader otherwise not. So for this, I put <code>setTimeout</code> as:</p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
    setTimeout(() =&gt; {
      store.commit('loading', true);
    }, 500);
    next();
  })
  </code></pre>
  
  <p>Now the loader is always shown never goes then I also tried to move <code>next()</code> statement into <code>setTimeout</code> but then the page first waits for <code>500 mili-sec</code> then the loader shows up and then hides suddenly and page loads.</p>
  
  <p>I want to make it in a better way, any suggestions?</p>