Как добавить загрузочное сообщение перед инициализацией компонента Vue?

Question

У меня есть приложение Rails.В основном слое я обертываю HTML-код контроллеров в #app:

body
  #app
    = yield

Vue компоненты в коде приложения HTML (Slim) Rails, которые я описываю следующим образом:

news-list limit="24"
news-show news-id="528"

Vue в проекте глобально инициализируется следующим образом:

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     // ...
})

Проблема в том, что иногда возникает задержка, прежде чем Vue завершает рендеринг.

То есть это выглядит так:

1. Перейти на страницу приложения Rails.Мы видим пустую страницу.
2. Визуализация компонента Vue.По-прежнему нет списка новостей.Только общая информация.
3. Запрос API.Предоставлен список новостей.Готово.

Я хочу сделать на стороне приложения Rails от 1 до 2 баллов, что-то похожее на счетчик.

То есть я перехожу на страницу приложения Rails,Везде, где есть компонент Vue, я вижу счетчик.Спиннер исчезает, как только компонент заканчивает рендеринг.

Но я не знаю, как это сделать ...

Я надеюсь на вашу помощь.И извините за мой английский.

Answer 1

Отображение счетчика перед инициализацией компонента vue можно выполнить путем визуализации счетчика внутри элемента, для которого инициализируется vue.

<div id="app">
   <!-- This content will be replaced, once the Vue component is rendered -->
</div>

Спиннер после загрузки компонента можно сделать с помощью v-if

<template>
  <div>
    <spinner v-if='!news' />
    <list-of-news v-else :news='news' />
  </div>
</template>