New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Large forms are slow #371
Comments
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) ? |
Thank you for the quick response @albanm! We have the use case that we display a lot of data in different tabs and only have a few Input fields for editing. |
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. |
Thank you for the hint! I'll give it a try soon and tell you what happened 😄 |
That didn't help... 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? |
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 ! |
@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 |
Thanks for reporting this issue. We encounter a similar issue. Is there any luck or update? |
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
Any hints how to solve that issue?
The text was updated successfully, but these errors were encountered: