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>