components/loading-spinner.js

class LoadingSpinner extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .spinner {
                    animation: spin 1s linear infinite;
                    width: 2rem;
                    height: 2rem;
                    border: 0.25rem solid rgba(59, 130, 246, 0.2);
                    border-top-color: rgb(59, 130, 246);
                    border-radius: 50%;
                }
                
                @keyframes spin {
                    to { transform: rotate(360deg); }
                }
            </style>
            <div class="flex justify-center items-center">
                <div class="spinner"></div>
            </div>
        `;
    }
}

customElements.define('loading-spinner', LoadingSpinner);