function showPoaSpinner(containerId) {
    const $container = $("#" + containerId);
    
    if ($container.css('position') === 'static') {
        $container.css('position', 'relative');
    }
    
    if ($('style#poa-spinner-style').length === 0) {
        const spinnerStyle = `
            <style id="poa-spinner-style">
                .poa-spinner-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(255, 255, 255, 0.7);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 1000;
                }
                .poa-spinner i {
                    color: #808080;
                }
            </style>
        `;
        $('head').append(spinnerStyle);
    }
    
    if ($("#poa-spinner-overlay-" + containerId).length === 0) {
        const spinnerHtml = `
            <div id="poa-spinner-overlay-${containerId}" class="poa-spinner-overlay">
                <div class="poa-spinner">
                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                </div>
            </div>
        `;
        $container.append(spinnerHtml);
        
    } else {
        $("#poa-spinner-overlay-" + containerId).show();
    }

    $container.children().not("#poa-spinner-overlay-" + containerId).hide();
}

function hidePoaSpinner(containerId) {
    $("#poa-spinner-overlay-" + containerId).hide();
    $("#" + containerId).children().not("#poa-spinner-overlay-" + containerId).show();
}