Showing loading counter in Vue App, while Vue App is not loaded. Also show reload app buttong after few seconds, and force autoload the page after 60 seconds.

vue-index.html

<script>
 let notLoadedFor = 1;
 let loadingElementId = 'loading-counter';
 function reloadVueApp() {
   var path = window.location.href + "?reset=true&ver=" + Math.random().toString(36).substring(2);
   window.location.href = path;
 };

 const interval = setInterval(function() {
   let el = document.getElementById(loadingElementId);
   console.log(el);
   if (el === undefined || el === null) {
     console.log('Vue App Loaded');
     clearInterval(interval);
   } else {
     console.log('Not loaded untill', notLoadedFor);
     notLoadedFor++;

     if (notLoadedFor <= 10) {
       el.textContent = "Loading " + notLoadedFor * 3;
     }

     if (notLoadedFor > 10) {
       el.innerHTML = "<button onClick='reloadVueApp();return false;'> Reload App </button> <p> App will be reloaded in " + (60 - notLoadedFor) + " seconds </p>";
       //reloadVueApp();
     }

     if (notLoadedFor >= 60) {
       clearInterval(interval);
       reloadVueApp();
     }

   }
 }, 1000);
</script>
 <div id="app">
   <!-- loader -->
    <div id="loading-wrapper">
      <span id="loading-text">The Great Vue App </span>
      <span id="loading-counter"></span>
    </div>
</div>