Add a text to loading indicator [loading_indicator is displayed along with a text]

Hi community,

I was working on a problem, where I need to display additional text with loading indicator if the computation heavy. Have tried several methods but none of them worked. Please help me accomplish this.

Sample code:

import panel as pn
pn.extension(loading_spinner="dots")
def trig(_):
        """
        Function to get triggered upon button click to update the data
        """

pn.panel(trig, loading_indicator = True)

Sample text:

pn.widgets.StaticText(value="Expensive computation in progress")

How do I tightly couple the text to this loading indicator?

1 Like

Hi @argcv

There are many ways to do this. Depends a bit on you use case and preferences.

Bind to the loading parameter of the pn.panel.

Turns out you can bind to ._inner_layout.param.loading of the panel. This is a hack.

import time
import panel as pn

pn.extension(loading_spinner="dots")

cache = dict(clicks=-1)

def submit(_):
        """
        Function to get triggered upon button click to update the data
        """
        time.sleep(0.5)
        clicks = cache["clicks"] = cache["clicks"] +1 
        return f"Submitted {clicks}"

def handle_loading(loading):
    return f"Is loading: {loading}"

button = pn.widgets.Button(name="Submit")
submit = pn.bind(submit, button)
component = pn.panel(submit, loading_indicator = True)
handle_loading = pn.bind(handle_loading, loading=component._inner_layout.param.loading)

pn.Column(button, component, handle_loading, component.param.loading).servable()

I’ve made a feature request here Make it possible to bind to loading parameter of pn.panel. · Issue #4306 · holoviz/panel (github.com).

1 Like

Thank you so much for the reply and the feature request @Marc.
My query was slightly different.
The loading indicator should come with a text. The text should appear together with the loading indicator(during load), on the click of button, and should disappear when the loading indicator disappears.
Something like below:
Demonstration

I’ll tinker with the code given in your answer and see if anything works!
Thanks a lot

1 Like