Updating & re-rendering custom `component_vue`
Hi there!
I have a question regarding the updating/rendering of a custom
component_vue component.
Say I have a fairly complex component_vue . It has many elements, and lots of props. Is there some condition after which one can say "you are using way too many props for solara + vue to handle the re-rendering smoothly". Or is there some condition, like are the props updated (on the frontend side) simultaneously or one by one..
As an example I have made the following pycafe example (attached, i hope)
(it does not render for me in pycafe, but it works just fine locally)
When I click the button, the component re-renders, but the progress bar updates are not smooth, but they "jump" as if the component is re-rendered completely anew, without remembering its previous state.
After some trial and error I found that to mitigate this I can declare the progress value and the buffer value as separate standalone reactive variables (global), update them independently , and pass them as values (meaning e.g. progress_value_reactive.value) to the custom vue component directly. After that I need to introduce some small time delay (time.sleep(0.5)) for the progress bar to be updated properly, and only then I can update the rest of the values in the component via my other global state (app_state) that I have defined. So something tells me that:
- either I am doing something at the limit of solara/vue can handle
- i am not using something correctly, and there are some kind of "race" conditions, as in one update over-rulling another and things are not displayed smoothly.
Can you think of anything that might be causing this and how to improve it if possible?
Please and thank you!
Jovan.2 Replies
I make the task async, and added
is_lesson_active, and now it works:
However, it is not clear to me if the PyCafe snippet you gave me is the working example, or the example with does not work smoothly. For me it is running smoothly, so maybe you can also give me a snippet where it does not?Yeah indeed, you are correct, the example i shared above is working. I have spent a lot of time on this and I can't reproduce the effect I am seeing in my larger app in a demo example..
I was just wondering if there are any constrains or conditions under which this might happen?
Next change I get I will do more refactor in hope of isolating the issue. If i find it and reproduce it i will report back.
Thanks!