이온 스켈레톤 로더

스켈레톤 로더는 콘텐츠가 로드될 때 사용할 수 있는 매우 멋진 임시 자리 표시자입니다.
Facebook이나 Instagram에서 그들을 본 적이 있을 것입니다.



오늘 우리는 Ionic에서 이 멋진 스켈레톤 로더를 만드는 방법을 살펴보겠습니다.

우선, 얼마 전에 구축한 Ionic starter app을 사용하여 시작하겠습니다.
GitHub에서 스타터를 찾을 수 있습니다.

Ionic에 스켈레톤 로더 추가

이 예에서는 tab1 페이지에 스켈레톤 로더를 추가할 것입니다.
tab1.page.html를 열고 다음을 추가합니다.

<ion-list>
  <ion-list-header>
    <ion-skeleton-text animated style="width: 80px"></ion-skeleton-text>
  </ion-list-header>
  <ion-item>
    <ion-thumbnail slot="start">
      <ion-skeleton-text></ion-skeleton-text>
    </ion-thumbnail>
    <ion-label>
      <h3>
        <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
      </h3>
      <p>
        <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
      </p>
    </ion-label>
  </ion-item>
</ion-list>

이것은 우리의 데이터와 거의 같은 형식이 될 것이며 이 경우 헤더와 하나의 항목이 있는 전체 목록을 렌더링하는 것을 볼 수 있습니다.
필요한 경우 여러 항목을 만드는 것은 사용자에게 달려 있습니다.
또한 스켈레톤이 가까운 영역을 채울 것입니다. 부분 너비로 만들어 일부를 상쇄하는 것을 볼 수 있습니다.
애니메이션 속성도 함께 제공됩니다. 이것은 그들에게 놀라운 감동적인 측면을 줄 것입니다.

이제 실제 데이터가 로드되면 표시를 중지해야 합니다.

먼저 tab1.page.ts 파일로 이동하여 일부 지연된 데이터를 로드해 보겠습니다.

data = [];

constructor() {
    setTimeout(() => {
      this.data.push({
          thumbnail: "URL",
        title: "Chris Bongers",
        description: "Some cool description about this person",
      });
    }, 2000);
}

이렇게 하면 데이터 배열에 한 사람이 로드되지만 2000밀리초 지연됩니다.

이제 이 데이터를 반영하도록 html 파일을 수정할 수 있습니다.

<ion-list *ngIf="data.length">
  <ion-list-header> Famous people </ion-list-header>
  <ion-item *ngFor="let item of data">
    <ion-thumbnail slot="start">
      <img [src]="item.thumbnail" />
    </ion-thumbnail>
    <ion-label>
      <h3>{{item.title}}</h3>
      <p>{{item.description}}</p>
    </ion-label>
  </ion-item>
</ion-list>

추가해야 할 마지막 요소는 스켈레톤 목록의 ngIf입니다.

<ion-list *ngIf="!data.length"></ion-list>

이렇게 하면 데이터가 로드될 때 스켈레톤이 표시되지 않습니다.

이제 다음과 같은 멋진 효과가 있어야 합니다.


다음GitHub repo에서 전체 데모 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나