@loading, @error, @placeholder 블록

지연 로딩 뷰에서는 로딩 상태에 따라 표시할 내용을 정의할 수 있습니다.

블록	설명
`@placeholder`	기본적으로 defer 블록은 트리거되기 전에는 아무것도 렌더링하지 않습니다. `@placeholder`는 지연 로딩할 내용이 로딩되기 전에 표시할 내용을 선언하는 선택 블록입니다. 로딩이 완료되면 Angular는 플레이스홀더를 지연 로딩된 내용으로 교체합니다. 필수는 아니지만 Angular 팀은 항상 플레이스홀더를 포함하는 것을 권장합니다. 지연 로딩 뷰 문서에서 자세히 알아보세요.
`@loading`	지연 로딩할 의존성을 가져오는 동안 표시할 내용을 선언하는 선택 블록입니다.
`@error`	지연 로딩에 실패했을 때 표시할 내용을 선언합니다.

위 하위 블록의 내용은 모두 즉시 로딩됩니다. 그리고 일부 기능에는 @placeholder 블록이 필요합니다.

이번 실습에서는 @loading, @error, @placeholder 블록으로 지연 로딩 뷰의 상태를 관리하는 방법을 배웁니다.

@placeholder 블록 추가하기

app.ts에서 @defer 블록에 @placeholder 블록을 추가합니다.
```
@defer {
  <article-comments />
} @placeholder {
  <p>Placeholder for comments</p>
}
```
@placeholder 블록 설정하기

@placeholder 블록에는 플레이스홀더를 표시할 최소 시간을 지정하는 minimum 인자를 선택적으로 전달할 수 있습니다. minimum은 밀리초(ms) 또는 초(s) 단위로 지정합니다. 지연 로딩할 의존성을 빠르게 가져왔을 때 플레이스홀더가 잠깐 나타났다가 사라지며 깜빡이는 현상을 방지합니다.
```
@defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
}
```
@loading 블록 추가하기

이제 컴포넌트 템플릿에 @loading 블록을 추가합니다.

@loading 블록은 두 가지 선택 인자를 받습니다:
- minimum: 이 블록을 표시할 최소 시간
- after: 로딩이 시작된 후 로딩 템플릿을 표시하기까지 기다릴 시간
두 인자 모두 밀리초(ms) 또는 초(s) 단위로 지정합니다.

app.ts에 @loading 블록을 추가하고 minimum 인자는 1s, after 인자는 500ms로 지정합니다.
```
@defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
} @loading (minimum 1s; after 500ms) {
  <p>Loading comments...</p>
}
```
NOTE: 이 예제에서는 두 인자를 세미콜론(;)으로 구분합니다.

@error 블록 추가하기

마지막으로 @defer 블록에 @error 블록을 추가합니다.

@defer {
  <article-comments />
} @placeholder (minimum 1s) {
  <p>Placeholder for comments</p>
} @loading (minimum 1s; after 500ms) {
  <p>Loading comments...</p>
} @error {
  <p>Failed to load comments</p>
}

축하합니다! 이제 지연 로딩 뷰를 이해했습니다. 다음 단계에서는 트리거에 대해 배워봅시다.

@placeholder 블록 추가하기

@placeholder 블록 설정하기

@loading 블록 추가하기

@error 블록 추가하기