components/api-loader.js

class ApiLoader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .loader-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 2rem;
                }
                
                .loader {
                    width: 48px;
                    height: 48px;
                    border: 5px solid #6d28d9;
                    border-bottom-color: transparent;
                    border-radius: 50%;
                    display: inline-block;
                    box-sizing: border-box;
                    animation: rotation 1s linear infinite;
                }

                @keyframes rotation {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
            <div class="loader-container">
                <span class="loader"></span>
            </div>
        `;
    }
}

customElements.define('api-loader', ApiLoader);