{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"О чем речь?","type":"header-two","key":"aemps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часто контент на страницу подгружается при помощи ajax запросов. Пока контент не загрузился, желательно показывать пользователю не пустое место, а какую-то заглушку, чтобы пользователь понимал, что видит ещё не конечную версию страницы. Специально для этой цели я сделал себе удобный vue компонент, который делает создание такой заглушки абсолютно простым делом.","type":"unstyled","key":"qgrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Spinner","type":"header-two","key":"9imr2"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":19,"offset":157},{"key":1,"length":4,"offset":178}],"inlineStyleRanges":[],"text":"Первое, что нам понадобится это spinner. Spinner - это анимированная картинка, которая будет показывать, что идёт загрузка. Я для этого использую библиотеку vue-loading-spinner (демо). Вы можете выбрать любой на свой вкус, я обычно использую Circle8. Спиннер я подключаю, как глобальный компонент вот так: ","type":"unstyled","key":"1akcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import {Circle8} from 'vue-loading-spinner'\nVue.component('loading-spinner', Circle8);","type":"unstyled","key":"7tq3v"},{"data":{"image":{"id":"5c7960d67c061c00b37db767"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примеры спиннеров","type":"atomic:image","key":"7dh79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Transition","type":"header-two","key":"euhd3"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":16,"offset":187}],"inlineStyleRanges":[],"text":"Чтобы сделать наш компонент ещё более симпатичным, добавим к нему анимацию - спиннер будет уезжать наверх, а на его месте будет появляться контент. Для этого использую анимации из пакета vue2-transitions. Опять же подключаю их глобально:","type":"unstyled","key":"14a9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Transitions from 'vue2-transitions'\nwindow.Vue.use(Transitions);","type":"unstyled","key":"2g4pr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализация","type":"header-two","key":"2blj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала весь компонент обернем в нашу анимацию:","type":"unstyled","key":"8hq5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"blockquote","key":"99thb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внтурь вставим два div'а. В одном будет спиннер, а в другом загруженный контент. Дивы будут показываться в зависимости от переменной loaded, т.е. если если loaded = false (контент не загружен), то показываем спиннер, а если true, то спиннер убираем и показываем контент.","type":"unstyled","key":"6rego"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

Загрузка...

\n \n

\n","type":"blockquote","key":"8sl34"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как видите, в диве с контентом у нас есть , туда будет добавляться загруженное содержимое.","type":"unstyled","key":"812j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Осталось добавить свойство компонента (prop), чтобы переключать состояние loaded. Полностью компонент выглядит так:","type":"unstyled","key":"4rdv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n","type":"blockquote","key":"bo293"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"67eg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда мне нужно сделать загрушку, я делаю что-то вроде:","type":"unstyled","key":"28nvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n

\n","type":"unstyled","key":"fpvml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если что-то не понятно, спрашивайте в комментариях.","type":"unstyled","key":"5dvjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"35nVjZ5Ui8zYQVhxbEt0"}],"entityMap":{"0":{"data":{"url":"https://github.com/nguyenvanduocit/vue-loading-spinner"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://nguyenvanduocit.github.io/vue-loading-spinner/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://github.com/BinarCode/vue2-transitions"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}