Show form loader for large forms

Learn how to show a loader while a large form is loading.

We can make sure our loader is rendered before the form starts rendering by using setTimeout with 0:

vue

<template>
  <Vueform
    v-if="loadStarted"
    v-show="loaded"  
    :schema
    @mounted="loaded = true"
  />
  <div v-show="!loaded">Loading...</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const loadStarted = ref(false)
const loaded = ref(false)

const schema = computed(() => {
  let schema = {}

  for (var i = 0; i < 1000; i++) {
    schema['text' + i] = { type: 'text' }
  }

  return schema
})

onMounted(() => {
  setTimeout(() => {
    loadStarted.value = true
  }, 0)
})
</script>

Show form loader for large forms ​

Show form loader for large forms