GitLite/src/lib/components/RepoLoadingOverlay.svelte

<script lang="ts">
  export let label = "Opening repository";
  export let repoName = "";
</script>

<div class="repo-loading" role="status" aria-live="polite">
  <div class="repo-loading-card">
    <!-- Animated git graph: nodes light up in sequence while a branch draws itself -->
    <svg class="git-graph" viewBox="0 0 120 120" aria-hidden="true">
      <defs>
        <linearGradient id="gl-line" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#646cff" />
          <stop offset="100%" stop-color="#41d1ff" />
        </linearGradient>
      </defs>

      <!-- rotating dashed ring -->
      <circle class="ring" cx="60" cy="60" r="52" />

      <!-- main trunk -->
      <path class="trunk" d="M42 22 L42 98" />
      <!-- branch forking off and merging back -->
      <path class="branch" d="M42 44 C42 62, 82 58, 82 76 L82 88" />

      <!-- commit nodes -->
      <circle class="node n1" cx="42" cy="30" r="6" />
      <circle class="node n2" cx="42" cy="60" r="6" />
      <circle class="node n3" cx="82" cy="88" r="6" />
      <circle class="node n4" cx="42" cy="90" r="6" />
    </svg>

    <div class="repo-loading-text">
      <span class="repo-loading-label">{label}…</span>
      {#if repoName}
        <span class="repo-loading-name" title={repoName}>{repoName}</span>
      {/if}
    </div>

    <div class="repo-loading-bar"><span></span></div>
  </div>
</div>

<style>
  .repo-loading {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    background: rgba(6, 6, 14, 0.72);
    backdrop-filter: blur(8px);
    animation: overlay-in 180ms ease;
  }

  .repo-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 34px 46px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-surface-raised);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  }

  .git-graph {
    width: 118px;
    height: 118px;
    overflow: visible;
  }

  .git-graph .ring {
    fill: none;
    stroke: rgba(100, 108, 255, 0.22);
    stroke-width: 2;
    stroke-dasharray: 26 18;
    transform-origin: 60px 60px;
    animation: ring-spin 5s linear infinite;
  }

  .git-graph .trunk,
  .git-graph .branch {
    fill: none;
    stroke: url(#gl-line);
    stroke-width: 4;
    stroke-linecap: round;
  }

  .git-graph .branch {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: branch-draw 2.4s ease-in-out infinite;
  }

  .git-graph .node {
    fill: var(--color-surface-alt);
    stroke: url(#gl-line);
    stroke-width: 4;
    animation: node-pulse 2.4s ease-in-out infinite;
  }
  .git-graph .n1 { animation-delay: 0s; }
  .git-graph .n2 { animation-delay: 0.5s; }
  .git-graph .n3 { animation-delay: 1s; }
  .git-graph .n4 { animation-delay: 1.5s; }

  .repo-loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .repo-loading-label {
    color: var(--color-ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .repo-loading-name {
    max-width: 260px;
    overflow: hidden;
    color: var(--color-ink-faint);
    font-family: var(--font-mono);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .repo-loading-bar {
    position: relative;
    width: 180px;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(100, 108, 255, 0.16);
  }
  .repo-loading-bar span {
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    animation: bar-slide 1.3s ease-in-out infinite;
  }

  @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ring-spin { to { transform: rotate(360deg); } }
  @keyframes bar-slide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
  }
  @keyframes branch-draw {
    0% { stroke-dashoffset: 90; opacity: 0.35; }
    45% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
  }
  @keyframes node-pulse {
    0%, 100% { fill: var(--color-surface-alt); filter: none; }
    50% {
      fill: var(--color-primary);
      filter: drop-shadow(0 0 6px rgba(100, 108, 255, 0.8));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .git-graph .ring,
    .git-graph .branch,
    .git-graph .node,
    .repo-loading-bar span { animation: none; }
    .git-graph .branch { stroke-dashoffset: 0; }
  }
</style>