Is there way to add an icon or something to show that computations are done in the background … something like an hourglass or “working …” label.
What you mean by “background”? There is this, for example: GitHub - timholy/ProgressMeter.jl: Progress meter for long-running computations
this is not going to help. Stipple is reactive. However, some of the computations may take a longer time.
@essenciary I am sorry for asking but can you help with Stipple. I am using it the build an interactive GUI. But some of the computations take too much time. How I can indicate to the user that works in progress. An icon, grayed screen, or a message can be helpful. Any suggestions are welcome. Thank you!
@monty Yes, that is supported. Stipple reactive models, by default, include a isprocessing property, of type Bool. You can use this anywhere to conditionally show UI elements.
So on the server, when you start a long computation, first you call model.isprocessing[] = true. When you’re done, you set it back to false.
On the frontend you can use @iif(:isprocessing) to display a UI element conditionally.
In addition, some UI elements have various properties to display busy states, and these can also be connected to isprocessing.
Here is an example of an input field that shows a loading indicator and becomes readonly while the app is busy (isprocessing is true): https://github.com/GenieFramework/PkgVizBoard/blob/3ce444982942fe6e20863db6439564fdfe3fd8d5/app/resources/dashboard/views/dashboard.jl#L7
Here is the server side code: when any of the filters in the UI change, triggering the computation, we set isprocessing to true: https://github.com/GenieFramework/PkgVizBoard/blob/3ce444982942fe6e20863db6439564fdfe3fd8d5/app/resources/dashboard/Dashboard.jl#L102
And then the isprocessing handler itself coordinates the processing of the data and when done, sets itself back to false, unblocking the UI: https://github.com/GenieFramework/PkgVizBoard/blob/3ce444982942fe6e20863db6439564fdfe3fd8d5/app/resources/dashboard/Dashboard.jl#L71
You can see it in action here: https://pkgs.genieframework.com
You can use isprocessing in conjunction with Spinners.spinner (an example here https://github.com/GenieFramework/StippleDemos/blob/master/BasicExamples/ImageGallery/ImageGallery.jl) or InnerLoaders.innerloader (no example yet but we can add one).
I hope this helps. I encourage you to also join our Discord for real time Q&A Genie Community
1 Like