HTMX Handling Timeout Component with Reload Button

1 min readDec 12, 2025

Can be used for handling timeout component and reload component.
reference: https://htmx.org/attributes/hx-request/

html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .htmx-indicator {
    display: none; /* Hide the spinner by default */
    }

    .htmx-request.htmx-indicator {
        display: block; /* Show the spinner when a request is active */
    }
</style>
</head>
<body>
    
    <div>
        <h1>Timeout component with reload button</h1>
    </div>

    <div id="loadingId" class="htmx-indicator">
        <span role="status">Loading Component...</span>
    </div>

    <!-- load long running task component with 3000 ms (3s) timeout -->
    <div hx-get="/unstable_component" hx-trigger="load" hx-request='{"timeout":3000}' hx-indicator="#loadingId" id="longRunningTaskId" >
        
    </div>

    <button hx-get="/unstable_component" type="button" hx-target="#longRunningTaskId" hx-request='{"timeout":3000}' hx-swap="innerHTML" hx-indicator="#loadingId" id="refreshButtonId" style="display: none;">
        Reload
    </button>

    <script>
        longRunningTaskId = document.getElementById("longRunningTaskId")
        refreshButtonId = document.getElementById("refreshButtonId")

        document.body.addEventListener('htmx:timeout', function(event) {
            // Prevent htmx from processing the error further (optional)
            event.preventDefault(); 
            
            // Display as Timed Out Component and enable refresh button
            longRunningTaskId.textContent = "Timed Out Component"
            refreshButtonId.style.display = 'block'; 
        });
        
        // Hide refresh button when button is clicked
        refreshButtonId.addEventListener("click", function() {
            longRunningTaskId.textContent = ""
            refreshButtonId.style.display = 'none'; 
        });

    </script>

    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
</body>
</html>

HTMX Handling Timeout Component with Reload Button

Written by Adi Ramadhan