components/loading-screen.js

class LoadingScreen extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        #site_loader_overlay {
          background: white;
          opacity: 1;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh;
          z-index: 99999;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        #site_loader_logo_inner {
          text-align: center;
        }
        
        .loading-animation {
          width: 60px;
          height: 60px;
          border: 5px solid #f3f3f3;
          border-top: 5px solid var(--primary);
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin: 0 auto 20px;
        }
        
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      </style>
      
      <div id="site_loader_overlay">
        <div id="site_loader_logo">
          <div id="site_loader_logo_inner">
            <div class="loading-animation"></div>
            <p>Loading...</p>
          </div>
        </div>
      </div>
    `;
    
    window.addEventListener('load', () => {
      setTimeout(() => {
        this.shadowRoot.getElementById('site_loader_overlay').style.opacity = '0';
        this.shadowRoot.getElementById('site_loader_overlay').style.pointerEvents = 'none';
      }, 500);
    });
  }
}

customElements.define('loading-screen', LoadingScreen);