Show loader while Modern-JS App itself is loading

As web developers, one of our key concerns is providing a smooth user experience. When working with modern JavaScript applications, loading times can vary, especially in scenarios where the app requires significant initialization or data fetching. Users might not immediately see the app's content, which could lead to frustration and confusion. To address this, we can implement a loader to keep users informed about the app's loading progress.

explore a simple example of how to show a loader while a Vue.js app is 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 and update the loader accordingly. We'll set up an interval to periodically check the status of the Vue.js app and update the loader text accordingly. 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).

Implementing a loader in your modern JavaScript apps can significantly improve user experience, especially in situations where loading times may vary. By providing clear feedback to users about the loading progress, you can reduce frustration and increase engagement with your app.

Remember, the example provided in this blog is a simplified illustration of a loader implementation. Depending on the complexity of your application and how it loads data, you may need to adjust the loader's behavior and design to fit your specific use case.

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

Happy coding!