Large forms are slow

[dominikhorn93]

Problem

We have built a large form with 40 input fields that is slow. I have tried to understand why it is like this, but I can't get any further.

Reproduce

I have noticed that it is the same in the doc with the large form. https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/examples#_large-form

• open the first element (titel 0)
• enter a value into the title textfield
• wait...

Any hints how to solve that issue?

[albanm]

The large form from the doc is a little sluggish yes but very usable (in my browser at least), it used to be much worse but I already worked on improving performance a few months ago. Unfortunately it is not great yet, I agree. I need to get back to it but it is hard work with no guarantee of success. I suspect there is something wrong with the way I manage reactivity, but I could not put my finger on it yet.

In the meantime I don't really see a way to help you. Maybe you could split your form into multiple smaller forms (large forms are usually not a great user experience anyway) ?

[dominikhorn93]

Thank you for the quick response @albanm! Yes i guess there is a issue in the reactivity / rerendering.

We have the use case that we display a lot of data in different tabs and only have a few Input fields for editing. Is would be a big change (especially in the backend) to have multiple schemas for handling the data.

[albanm]

Could you try with eager=false here https://github.com/koumoul-dev/vuetify-jsonschema-form/blob/master/lib/mixins/ObjectContainer.js#L135

If it improves performance I could add an option to control it. But be aware that even it it works it will prevent model initialization and validation in the tabs not rendered.

[dominikhorn93]

Thank you for the hint! I'll give it a try soon and tell you what happened 😄

[dominikhorn93]

That didn't help... Due to the reactivity pattern that is implemented - every field should be checked due to possible rule or context changes it is hard to solve...

I found a solution that fits my needs -> debounce user input and change the input before starting with the whole rerender cycle. What do you think about the solution? It has some impact on rules or the title attribute in object lists, which are then not updated immediately. Maybe this should be quite configurable that you can accept it in as a pull request?

https://github.com/koumoul-dev/vuetify-jsonschema-form/commit/925780068d8c6598367f9daedc677558f5adf748

[albanm]

Another possibility similar to debounce would be to emit input only when 'change' event is caught from a field, not 'input'. Or maybe 'blur'. The effect would be comparable to the validateOnBlur vuetify prop on text fields. Maybe an option "inputOnBlur", or an option inputMode with values input|blur|debounce ?

If you work on a pull request in a way that this new behavior is optional I would gladly accept it !

[darioackermann]

@dominikhorn93 we'd be interested in the same feature. are you willing to create a PR? otherwise, I'd probably be able to add a PR for this in late February

[ai-nikolai]

Thanks for reporting this issue. We encounter a similar issue. Is there any luck or update?

[ai-nikolai]

@darioackermann @albanm @dominikhorn93