components/loader.js

class ShopLoader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .loader-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 2rem;
                }
                .spinner {
                    width: 40px;
                    height: 40px;
                    border: 4px solid #E5E7EB; /* Gray-200 */
                    border-top: 4px solid #2563EB; /* Primary Blue */
                    border-radius: 50%;
                    animation: spin 1s linear infinite;
                }
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
            <div class="loader-container">
                <div class="spinner"></div>
            </div>
        `;
    }
}

customElements.define('shop-loader', ShopLoader);