I was wondering if anyone would mind sharing a small example of adding a loading spinner/animation when a button is being clicked. I have created a dashboard and the user clicks a button to load the data, and it takes a few seconds. I would just want a loading spinner in the middle. What is the best way to do this? If anyone has a small example I can check out to help me do something similar, I would really appreciate it:)
I do most of my development using bokeh models and layouts. On occasion, I find it useful to pull in Holoviz panel for some convenience behaviors related to dynamic layouts or additional widgets.
Holoviz panel plays very nicely with bokeh and its server is the bokeh server, so working with the two is typically straightforward. In my experience, I have never had to rewrite my original bokeh code – excepting a few lines of superficial changes – to leverage the power of both tools together.
Thanks for the reply. I might try Panel instead. I have a small example below if anyone wants to try and see if they can get it working. Not sure why the spinner is not spinning when I increase time.sleep seconds. If you try you see it disappears as soon as it starts spinning.
I played with your example and (as usual these days it seems) I have not been able to solve the problem, but I’ve been able kinda isolate the problem further. I broke up your functions into even more granular components, changed the function to alter the Div’s visibility instead of the text property, and added a CustomJS to a) see if it’s a classic case of explicitly triggering change.emit(), and/or b) see when the changes to the visibility property are “felt” on the JS side:
It seems to me that do_stuff is being executed first, then both the load and hide spinner functions actually happen, hence the loader “blinking” right as the counter finishes.
I don’t know why the order of operations is occurring like this → I feel like you’re tantalizingly close.
EDIT: Ha, the frame rate on my gif only managed to capture only one “blink” of the loader (i click three times in the gif), but trust me, it blinks every time you click the button.
Hi, thanks for looking into it. I was working with examples posted here on the discourse for older versions of bokeh. The new version (I am using 2.4.1) the events triggered in callbacks happens at the end of the callback, so the function makes the spinner blink in and out of view at the end of the callback. Same that is happening for you. Bryan posted a solution to the question I had a year ago: Can't get spinning loader to work. What am I doing wrong?
Maybe its best to animate the spinner first (when user clicks button) and then have the callback stop the animator after it has loaded the data when the document is idle?
Awesome Sebastien, thanks for the help on this problem. This is very useful as I would want to use the spinner in different tabs and plots in the dashboard. I can just pull this function when I need it to show a loading spinner.