How to hide indicators during page load

[vlcinsky]

I have python-fastapi-github-timeline app where the page has couple of divs with <h3> headings serving as indicators.

The problem is that when the page loads, all the indicators show for a moment.

I would like to have control of what is shown during initial page load e.g. allow to show only an indicator "loading app..." and remaining indicators would be hidden.

[1cg]

Can you give me a bit more of an idea of the structure of the HTML? You should be able to call out specific indicators using the hx-indicator attribute:

https://htmx.org/attributes/hx-indicator/

[theptrk]

Agree this is a problem. I think it happens if htmx is loaded by cdn. It means that even though the DOM is loaded the htmx-indicator javascript isnt loaded to hide the div.

There should be some type of CSS class workaround for this.

Here a video of just reloading the browser window https://user-images.githubusercontent.com/5618025/215294104-cb17ae15-1fc4-476d-9918-ba69aba897fa.mov

[theptrk]

This is actually present in the HTMX doc examples: https://htmx.org/examples/click-to-load/

It depends on your internet connection but you can see the loading indicator here before you click to load

[theptrk]

The easiest fix I've found is to duplicate the css classes in your own CSS that way you dont need to wait for the library to load.

      <style>
        .htmx-indicator {
          opacity: 0;
        }
        .htmx-request .htmx-indicator {
          opacity: 1;
        }
      </style>

It works well but one day those classes will change.

[theptrk]

A fix that DID NOT WORK, but I'll put here for reference:

Here I add a SetInterval that checks to see if the library is loaded. The problem is that the library loads much earlier than the htmx-indicator elements get hidden. If we built a "library loaded and finished initialization" callback it could provide a generalized solution to these problems.

  var a = setInterval( function() {
      if ( typeof window.htmx === 'undefined' ) {
          return;
      }
      clearInterval( a );

      console.log('htmx is loaded'); // call your function with jQuery instead of this
      var elements = document.querySelectorAll('.htmx-indicator');
      for (var i = 0; i < elements.length; i++) {
          elements[i].removeAttribute("style");
      }

  }, 500 );

[jyrimatti]

Related: https://github.com/bigskysoftware/htmx/issues/1062

Instead of injecting styles, would providing a separate css file (either to be included from CDN or copy-pasted to a project) solve both these issues?

[theptrk]

Yeah both would likely fix this in the same way.

I added the style tags since I was testing a fix but I believe if you moved it to a linked style sheet in the head tag it would style it before you could see the indicator flashing.