How to show modal on custom action?

Hey there! 👋 I understand what you’re trying to achieve.

Loading states can be tricky, but I’ve got a solution that should work perfectly for you!

You can create a custom modal with an overlay using JavaScript and CSS. I’ll help you set it up step by step. Just let me know if you need the actual code snippets, and I’ll be happy to share them with you. Remember, we can always try different approaches if this one doesn’t quite fit your needs!

html :

<!-- Modal Structure -->
<div id="loadingModal" class="modal">
    <div class="modal-content">
        <div class="loader"></div>
        <p>Please wait ....</p>
    </div>
</div>
<div id="overlay"></div>

<!-- Your Action Button -->
<button onclick="handleAction()" class="action-button">Action</button>

JavaScript

function showLoading() {
    document.getElementById('loadingModal').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
    // Disable all links
    document.querySelectorAll('a').forEach(link => {
        link.style.pointerEvents = 'none';
    });
}

function hideLoading() {
    document.getElementById('loadingModal').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
    // Re-enable all links
    document.querySelectorAll('a').forEach(link => {
        link.style.pointerEvents = 'auto';
    });
}

async function handleAction() {
    showLoading();
    try {
        // Your API call here
        const response = await fetch('your-api-endpoint', {
            method: 'POST',
            // Your other fetch options
        });
        const data = await response.json();
        // Handle the response
    } catch (error) {
        console.error('Error:', error);
    } finally {
        hideLoading();
    }
}

css:

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 1001;
    text-align: center;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Thank you @mohammadrasoulasghari For now, I have implemented JS solution, but I was wondering if there was some in-built functions from Filament.

Anyway, instead of creating custom action button and adding JS, I have used dispatch event.