pedidos-express/public/main/js/utils/loader.js

// --- Loader Global ---
let globalLoaderElement = null;

function createGlobalLoader() {
    if (document.getElementById('globalLoader')) return;
    globalLoaderElement = document.createElement('div');
    globalLoaderElement.id = 'globalLoader';
    globalLoaderElement.className = 'fixed inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-[2000] transition-opacity duration-300 ease-in-out pointer-events-none';
    globalLoaderElement.style.opacity = '0';
    globalLoaderElement.innerHTML = `
        <div style="border: 6px solid rgba(255, 255, 255, 0.2); border-radius: 50%; border-top: 6px solidrgb(172, 85, 85); width: 60px; height: 60px; animation: spin 1s linear infinite;"></div>
        <p class="text-white text-xl mt-4">Procesando su pedido...</p>
    `;
    document.body.appendChild(globalLoaderElement);
}

function showGlobalLoader(message = "Procesando su pedido...") {
    if (!globalLoaderElement) createGlobalLoader();
    globalLoaderElement.style.display = 'flex';
    globalLoaderElement.querySelector("p").textContent = message;
    setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.opacity = '1'; }, 10);
}

function hideGlobalLoader() {
    if (globalLoaderElement) {
        globalLoaderElement.style.opacity = '0';
        setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.display = 'none'; }, 300);
    }
}

export { createGlobalLoader, showGlobalLoader, hideGlobalLoader };