Show loader while Modern-JS App itself is loading

When working with modern JavaScript applications, loading times can vary, especially in scenarios where the app requires significant initialization or data fetching. Users see a blank screen until the app finishes loading.

We'll use JavaScript and HTML to create a loader that updates its progress until the app is fully loaded.

Step 1: Setting up the HTML Structure

Let's begin by setting up the necessary HTML structure. We'll create a "loading-wrapper" div that contains a text element to show the app's name and another element to display the loading progress.

<div id="app">
  <!-- loader -->
  <div id="loading-wrapper">
    <span id="loading-text">The Great Vue App</span>
    <span id="loading-counter"></span>
  </div>
</div>

In this example, the loader is placed inside the "app" div. We have an element with the ID "loading-text" to display the app's name, and the "loading-counter" element will be used to show the loading progress.

Step 2: Implementing the JavaScript Logic

Next, let's implement the JavaScript logic to handle the loading progress. We'll set up an interval to periodically check the status of the Vue.js app and update the loader text. If the app takes too long to load, we'll provide an option to reload it.

<script>
  // Initialize variables
  let notLoadedFor = 1;
  let loadingElementId = 'loading-counter';

  // Function to reload the Vue.js app
  function reloadVueApp() {
    var path = window.location.href + "?reset=true&ver=" + Math.random().toString(36).substring(2);
    window.location.href = path;
  };

  // Main interval to check loading status
  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 until', notLoadedFor);
      notLoadedFor++;

      // Update loader text until 10 seconds
      if (notLoadedFor <= 10) {
        el.textContent = "Loading " + notLoadedFor * 3;
      }

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

      // If the app doesn't load within 60 seconds, force reload
      if (notLoadedFor >= 60) {
        clearInterval(interval);
        reloadVueApp();
      }
    }
  }, 1000);
</script>

Step 3: How the Loader Works

The JavaScript code above checks the existence of the "loading-counter" element at regular intervals. As long as this element exists, it means the Vue.js app is still loading. The loader updates every second, displaying the loading progress in increments of 3 (e.g., "Loading 3," "Loading 6," "Loading 9," and so on) until it reaches 10 seconds.

After 10 seconds, the loader offers the user the option to reload the app if it's still not loaded. The "Reload App" button will be displayed, along with a countdown indicating how much time is left until the app is forcefully reloaded (in this example, within 60 seconds).

Remember, the example provided in this blog is a simplified illustration of a loader implementation. The 10-second and 60-second thresholds in the interval are what you'll actually want to tune to match your app's real load times.

PS: Don't forget to remove console.log statements.