How to show loading screen while form is loading? #228
-
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? |
Beta Was this translation helpful? Give feedback.
Answered by
adamberecz
Apr 26, 2024
Replies: 1 comment
-
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 |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
pwicks86
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It's a bit tricky, but can be achieved:
So first we hide the form with
v-if
. Then you can usesetTimeout
with0
to make sure it only starts to render after the loader …