frontend/src/lib/components/LoadingOverlay.svelte

<!-- LoadingOverlay — Shows the hexagonal MAC loader centered with optional message -->
<script>
  import Loader from './Loader.svelte';
  import { globalLoading, loadingMessage } from '$lib/stores.js';

  export let show = false;
  export let message = '';
  export let size = 100;

  // Can be driven by props OR by global store
  $: visible = show || $globalLoading;
  $: displayMsg = message || $loadingMessage || '';
</script>

{#if visible}
  <div class="loading-overlay" aria-live="polite">
    <div class="loading-content">
      <Loader {size} color="var(--accent, #D97449)" />
      {#if displayMsg}
        <p class="loading-msg">{displayMsg}</p>
      {/if}
    </div>
  </div>
{/if}

<style>
  .loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn 0.25s ease;
  }

  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .loading-msg {
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #1A1A1A);
    letter-spacing: 0.03em;
    opacity: 0.85;
    margin: 0;
    text-align: center;
    max-width: 280px;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
</style>