market-backOfficce/src/app/components/loading-skeleton/loading-skeleton.component.ts

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-loading-skeleton',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="skeleton-wrapper">
      @if (type === 'tree') {
        <div class="skeleton-tree">
          @for (item of [1,2,3,4,5]; track item) {
            <div class="skeleton-tree-item">
              <div class="skeleton-circle"></div>
              <div class="skeleton-line" [style.width]="treeWidths[item - 1]"></div>
            </div>
          }
        </div>
      }
      
      @if (type === 'card') {
        <div class="skeleton-card">
          <div class="skeleton-image"></div>
          <div class="skeleton-text">
            <div class="skeleton-line"></div>
            <div class="skeleton-line short"></div>
          </div>
        </div>
      }
      
      @if (type === 'list') {
        <div class="skeleton-list">
          @for (item of [1,2,3]; track item) {
            <div class="skeleton-list-item">
              <div class="skeleton-line"></div>
            </div>
          }
        </div>
      }
      
      @if (type === 'form') {
        <div class="skeleton-form">
          @for (item of [1,2,3,4]; track item) {
            <div class="skeleton-field">
              <div class="skeleton-line short"></div>
              <div class="skeleton-input"></div>
            </div>
          }
        </div>
      }
    </div>
  `,
  styles: [`
    .skeleton-wrapper {
      padding: 1rem;
    }

    @keyframes shimmer {
      0% {
        background-position: -468px 0;
      }
      100% {
        background-position: 468px 0;
      }
    }

    .skeleton-line,
    .skeleton-circle,
    .skeleton-image,
    .skeleton-input {
      background: linear-gradient(
        to right,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
      );
      background-size: 800px 104px;
      animation: shimmer 1.5s infinite linear;
      border-radius: 4px;
    }

    .skeleton-tree {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .skeleton-tree-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .skeleton-circle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .skeleton-line {
      height: 16px;
      width: 100%;
      
      &.short {
        width: 60%;
      }
    }

    .skeleton-card {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
    }

    .skeleton-image {
      height: 200px;
      width: 100%;
    }

    .skeleton-text {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .skeleton-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .skeleton-list-item {
      padding: 1rem;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
    }

    .skeleton-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .skeleton-field {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .skeleton-input {
      height: 56px;
      width: 100%;
    }
  `]
})
export class LoadingSkeletonComponent {
  @Input() type: 'tree' | 'card' | 'list' | 'form' = 'list';

  /** Pre-computed widths so they don't change between CD cycles (NG0100). */
  readonly treeWidths = [1, 2, 3, 4, 5].map(
    (_, i) => ['60%', '80%', '70%', '90%', '75%'][i]
  );
}