스켈레톤 UI

개발자도구 > Network > No throttling을 Slow 3G로 변경

강제로 느린환경으로 만들어서 확인해준다.

// await가 실행되기 전에 스켈레톤을 진행시켜둔다
// await이후 주석처리하면 스켈레톤 확인가능.
// 랜더링될 구조와 같은 구조로 배치시킨다.
this.el.classList.add("container", "movie-view");
this.el.innerHTML = /* html */ `
  <div class="poster skeleton"></div>
  <div class="year skeleton"></div>
  <div class="title skeleton"></div>
  <div class="plot skeleton"></div>
  <div class="labels skeleton"></div>
  <div class="ratings skeleton"></div>
  <div class="actors skeleton"></div>
  <div class="director skeleton"></div>
  <div class="production skeleton"></div>
  <div class="genre skeleton"></div>
`;

await 함수();
this.el.innerHTML = /* html */ `
	새롭게 그려준다.
`

.skeleton {
  position: relative;
  overflow: hidden;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0)
    );
    transform: translateX(-100%);
    animation: skeleton infinite 1s;
  }
}
@keyframes skeleton {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}