htmx-indicator indicator displays during initial page load

Question

I've got an htmx-indicator in my project that I use to display when reloading a portion of the page. However, I am noticing that the loading indicator renders during the initial page render, and then fades out:

Shouldn't the htmx-indicator's start out hidden? What do I need to add to them to make sure it starts hidden, and only gets displayed on my htmx load?

Here is the snippet of html (the project uses django and bootstrap) (I've got many of the styles just hard coded in the html while I'm tweaking):

            <div class="spinner-wrapper position-absolute htmx-indicator" style="top:0; left:0; width:100%; height:100%; z-index: 1000; pointer-events:none;">
                <div class="d-flex justify-content-center align-items-center position-relative" style="height:100%;">
                    <div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
                    </div>
                </div>
            </div>

I have not made adjustments to the default htmx CSS styles.

Through Bootstrap, the class="spinner-border text-info" gives you a spinner. — Dan K, Jul 20 '22 at 19:17
Right. I was able to reproduce it only with a simulated slow connection and when the Boostrap CSS was in the header and HTMX script was at the footer. So the browser first loads the BS CSS, starts the spinner, then parses HTMX stuff and hides the spinner. Can you confirm that you have a similar page structure, so BS first, then HTMX? — Dauros, Jul 20 '22 at 19:29
(Edited), Almost that order, but not quite. I load bootstrap first, and then HTMX, in the header, and then have my body. Specifically, bootstrap.min.css, then bootstrap-icons.css, then bootstrap.bundle.min.js (defer), and then htmx.min.js (defer), all in the header. Then I've got my body. I've also tried removing both "defer"s, with no change. — Dan K, Jul 20 '22 at 19:34

score 6 · Accepted Answer · answered Jul 20 '22 at 20:07

On slow connections and/or with weak(er) CPUs it takes some time to load and parse/evaluate the CSS/JS files. In this case the spinner is created with Boostrap CSS, but the class definition that hides the .htmx-indicator class elements is injected later with HTMX, so until that the spinner will be visible. To solve this issue we can manually add the class definition of htmx-indicator before Bootstrap CSS stuff, so when the spinner starts its div will be already invisible:

<head>
    <style>
    .htmx-indicator {
        opacity: 0;
        transition: opacity 200ms ease-in;
    }
    </style>

    <!-- Bootstrap -->

    <!-- HTMX -->
</head>

htmx-indicator indicator displays during initial page load

1 Answers1