О чем речь?
Часто контент на страницу подгружается при помощи ajax запросов. Пока контент не загрузился, желательно показывать пользователю не пустое место, а какую-то заглушку, чтобы пользователь понимал, что видит ещё не конечную версию страницы. Специально для этой цели я сделал себе удобный vue компонент, который делает создание такой заглушки абсолютно простым делом.
Spinner
Первое, что нам понадобится это spinner. Spinner - это анимированная картинка, которая будет показывать, что идёт загрузка. Я для этого использую библиотеку vue-loading-spinner (демо). Вы можете выбрать любой на свой вкус, я обычно использую Circle8. Спиннер я подключаю, как глобальный компонент вот так:
import {Circle8} from 'vue-loading-spinner'
Vue.component('loading-spinner', Circle8);
Transition
Чтобы сделать наш компонент ещё более симпатичным, добавим к нему анимацию - спиннер будет уезжать наверх, а на его месте будет появляться контент. Для этого использую анимации из пакета vue2-transitions. Опять же подключаю их глобально:
import Transitions from 'vue2-transitions'
window.Vue.use(Transitions);
Реализация
Сначала весь компонент обернем в нашу анимацию:
<slide-y-up-transition group>
</slide-y-up-transition group>
Внтурь вставим два div'а. В одном будет спиннер, а в другом загруженный контент. Дивы будут показываться в зависимости от переменной loaded, т.е. если если loaded = false (контент не загружен), то показываем спиннер, а если true, то спиннер убираем и показываем контент.
<slide-y-up-transition group>
<div v-if="!loaded" class="text-center" key="loading">
<h5>Загрузка...</h5>
<div style="display: flex; justify-content: center">
<loading-spinner></loading-spinner>
</div>
</div>
<div v-if="loaded" key="ready">
<slot></slot>
</div>
</slide-y-up-transition>
Как видите, в диве с контентом у нас есть <slot></slot>, туда будет добавляться загруженное содержимое.
Осталось добавить свойство компонента (prop), чтобы переключать состояние loaded. Полностью компонент выглядит так:
<template>
<slide-y-up-transition group>
<div v-if="!loaded" class="text-center" key="loading">
<h5>Загрузка...</h5>
<div style="display: flex; justify-content: center">
<loading-spinner></loading-spinner>
</div>
</div>
<div v-if="loaded" key="ready">
<slot></slot>
</div>
</slide-y-up-transition>
</template>
<script>
export default {
name: "LoadingContent",
props: {
loaded: Boolean,
}
}
</script>
Теперь, когда мне нужно сделать загрушку, я делаю что-то вроде:
<loading-content :loaded="loaded">
<p>{{какой-то_подгруженный_контент}}</p>
</ loading-content >
Если что-то не понятно, спрашивайте в комментариях.