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

Question

[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.
Какие есть варианты, чтобы избежать сдвига контента после загрузки?

Answer 1

[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>

Comments

[ICUI4CU]

А откуда тебе знать сколько он займёт, если данные произвольны?

Меня бы устроили размеры компонента без данных с файла

Вариант дублировать всю разметку не подходит, там ее много

[Aetae]

ICUI4CU, тебе не надо дублировать всю разметку, тебе надо продублировать только верхние контейнеры, класс fixed-size видишь?

В принципе можно сделать и так:

<div>
  <div v-for="foo in receivedData.foo" class="fixed-size">
    <template v-if="!loading">
    {{ foo }}
    <template>
  </div>
  {{ receivedData.bar }}
</div>

data() {
  return {
    receivedData: {
      foo: 10,
      bar: 'Loading'
    },
    this.loading: true
  }
},

Но это менее оптимально.

Если знаешь гарантированные размеры всего блока, никто не мешает сделать так:

<div v-if="loading" class="fixed-size">
  Loading
</div>
<div v-else class="fixed-size">
  <div v-for="foo in receivedData.foo">{{ foo }}</div>
  {{ receivedData.bar }}
</div>

Меня бы устроили размеры компонента без данных с файла

Ещё раз: откуда ты их знаешь? Если они фиксированы в css и количество элементов в receivedData.foo тоже известно, то см. выше. Если же размеры зависят от текста, что прилетит и количество элементов может быть разным - размер может быть произвольным.