components/loader.js

class CustomLoader extends HTMLElement {
  toggleLoader(show) {
    if (show) {
      this.shadowRoot.querySelector('.loader-container').classList.remove('hidden');
    } else {
      this.shadowRoot.querySelector('.loader-container').classList.add('hidden');
    }
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .loader-container {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 9999;
        }
        .loader {
          width: 50px;
          height: 50px;
          border: 5px solid #f3f3f3;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        .hidden {
          display: none;
        }
      </style>
      <div class="loader-container hidden">
        <div class="loader"></div>
      </div>
    `;
  }
}
customElements.define('custom-loader', CustomLoader);