ngx skeleton 스켈레톤 활용

<ngx-skeleton-loader
  *ngIf="!isLoaded()"
  [theme]="{ width: '100%', height: '100%' }"
/>

<img [src]="src" class="w-full h-full rounded-md" (load)="isLoaded.set(true)" />

1. 스켈레톤 컴포넌트
   위 코드에서 (loadeddata)="isLoaded.set(true)" 부분은 비디오 데이터가 로드되면 isLoaded 상태를 true로 설정합니다.

그러나 주의할 점은, loadeddata 이벤트는 브라우저가 현재 프레임의 데이터를 최소한으로 로드했을 때 발생하므로, 전체 비디오 파일이 아직 완전히 다운로드되지 않았을 수도 있다는 점입니다. 전체 비디오 파일이 완전히 다운로드된 시점을 알고 싶다면, 대신 canplaythrough 이벤트를 사용하는 것이 좋습니다.

<app-skeleton
                  class="absolute z-0 object-fill object-center w-full h-full rounded-md aspect-[9/16]"
                  [src]="shortVideo.thumbnail!"
                />

2. 사용 예시