페이스북과 유튜브에서 최근 흔히 볼 수 있는 콘텐츠 제공자를 쉽게 실현할 수 있는 vue-content-loader의 소개다.
쉽게 가져올 수 있고 스파 풍성한 스타일을 연출할 수 있어 추천해드려요.
다음 컨텐트를 작성합니다.
(GIF 때문에 문제가 있지만 실제로는 더 매끄럽다.)

vue-content-loader 설치

https://github.com/egoist/vue-content-loader
이용React에 있는 react-content-loader 버전 같아요.
Vue 프로젝트에 매크로 패키지를 추가합니다.

$ yarn add vue-content-loader

샘플

그리고 기입하고 사용하기만 하면 된다.
LoadingBlogSection 어셈블리를 만듭니다.
미관을 위해 vuetifyhttps://vuetifyjs.com/en）를 사용했습니다.
LoadingBlogSection.vue

<template lang="pug">
  v-container(grid-list-lg fluid pa-0)
    v-layout(row wrap)
      v-flex(v-for="n in 4" :key="n" xs12 md3)
        v-card
          content-loader(:width="300" :height="300")
            rect(width="100%" height="150")
            rect(y="180" x="15" width="150" height="20")
            rect(y="220" x="15" width="200" height="10")
            rect(y="240" x="15" width="250" height="10")
            rect(y="260" x="15" width="150" height="10")
            rect(y="280" x="15" width="250" height="10")
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  }
}
</script>

다음 섹션에서는 ContentLoader를 읽고 components에 로그인합니다.

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  }
}
</script>

다음은 Loader 표시 섹션입니다.
콘텐츠-loader 내부의 rect 구성 요소에 사각형의 SVG를 표시합니다.
y는 상부에서 온 절대 위치이고 x는 왼쪽에서 온 절대 위치이다.

<template lang="pug">
...
        v-card
          content-loader(:width="300" :height="300")
            rect(width="100%" height="150")
            rect(y="180" x="15" width="150" height="20")
            rect(y="220" x="15" width="200" height="10")
            rect(y="240" x="15" width="250" height="10")
            rect(y="260" x="15" width="150" height="10")
            rect(y="280" x="15" width="250" height="10")
...

이렇게 되면, 불러오는 구성 요소가 생겼다
그리고 v-if로 마운트 상태를 판정하고 마운트에만 표시하면 OK입니다.
다음은 Apollo의 예로 $apollo.loading를 통해 로드 상태를 판정합니다.
Ajax에서 블로그 섹션에서 얻은 데이터 표시용 구성 요소입니다.
index.vue

<template lang="pug">
  v-content
    v-container
      h1(class="mb-5") vue-content-loader demo
      <!-- この部分でv-ifで判定して、表示を切り替えている -->
      BlogSection(:posts="posts" v-if="!$apollo.loading")
      LoadingBlogSection(v-if="$apollo.loading")
</template>

<script>
import { FETCH_POST_BY_LIMIT } from '@/apollo/query/posts'
import BlogSection from '@/components/BlogSection'
import LoadingBlogSection from '@/components/LoadingBlogSection'

const POSTS_LIMIT = 4

export default {
  components: {
    BlogSection,
    LoadingBlogSection
  },
  apollo: {
    posts: {
      query: FETCH_POST_BY_LIMIT,
      variables () {
        return {
          first: POSTS_LIMIT
        }
      }
    }
  }
}
</script>

이렇게 하면 완성된다.

참조: GUI를 통해 로드된 SVG 조정

다음 웹 사이트에서 GUI에서svg 표시 부분을 조정할 수 있습니다.
https://create-vue-content-loader.netlify.com/
완료되면 왼쪽 창의 코드를 복사하십시오.