HTMX - Load content with loading indicator

htmx-load-content-with-loading-indicator.md

Problem: I want blazingly fast page load but my content may take some time to load.

The page may actually be fast but the content may include calling a service that may take some time to respond or worst, fail.

Solution: Load the full page (HTML, CSS, JS) without the slow content first. Load the slow content later on page load.

<div
  class="albums-container"
  hx-get="/album-listing"
  hx-trigger="load"
  hx-indicator="#album-spinner">
  <span id="album-spinner">
    <i class="fa fa-spinner"></i>
  </span>
</div>

For the /album-listing endpoint, we fetch the listing by calling whatever backend software we use. On success, we return the HTML fragment for the listing content. On failure, we return the HTML fragment for the error message.