Login/Register
htmx-indicator indicator displays during initial page load
Asked Answered
Solved htmx
L

1

6

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:

GIF of initial load

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.

Limonene answered 20/7, 2022 at 18:29 Comment(4)
How do you create the spinner? – Velleman
Through Bootstrap, the class="spinner-border text-info" gives you a spinner. – Limonene
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? – Velleman
(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. – Limonene
V
7

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>
Velleman answered 20/7, 2022 at 20:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.