@ICUI4CU

Как сделать прелоадер для компонента с резервированием места?

Есть компонент, который имеет такой вид, к примеру
<div v-if="loading">
	<div v-for="foo in receivedData.foo">{{ foo }}</div>
	{{ receivedData.bar }}
</div>

Данные он подгружает с отдельного файла
data() {
	return {
		receivedData: null,
		this.loading: true
	}
},
created() {
	fetch('data.json')
	.then(res => res.json())
	.then(data => {
		this.receivedData = data;
		this.loading = false;
	})
}

Проблема в следующем - пока идет загрузка данных, я хочу показывать прелоадер поверх компонента. То есть html-код должен всегда находиться на странице и резервировать место для себя.
И c этим у меня возникла проблема: если я использую v-if="loading", то содержимое компонента не рендерится и его высота равна 0. Если убрать это условие, то получаю ошибку при попытке обратиться к свойствам receivedData.
Какие есть варианты, чтобы избежать сдвига контента после загрузки?
  • Вопрос задан
  • 25 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
А откуда тебе знать сколько он займёт, если данные произвольны?

Если в receivedData может быть фиксированное количество записей фиксированных размеров, то условно как-то так:
<div v-if="loading">
  <div v-for="foo in 10" class="fixed-size loading"></div>
  Loading
</div>
<div v-else>
  <div v-for="foo in receivedData.foo" class="fixed-size">{{ foo }}</div>
  {{ receivedData.bar }}
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы