How to show loading screen while form is loading?

[pwicks86]

I have a large form that I am providing via schema and it takes a few seconds for the form to load. Is there a way to show a loading indicator of some kind until the form is ready for use?

[adamberecz]

It's a bit tricky, but can be achieved:

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

So first we hide the form with v-if. Then you can use setTimeout with 0 to make sure it only starts to render after the loader is shown. Then, once the form is mounted you can show it and hide the loader.