Adding Loading Indicator To Gathering Data

Panel
1

Hello. I’m building an app that goes off to gather several pieces of data at the click of a button. and returns them as dataframes. I want to add a loading indicator so the user knows that the data collection is going on. I tried something like this which didn’t work. What is the correct syntax? And how could I could a global loading indicator to show that all the data is back?

import pandas as pd
import panel as pn
import requests
import json
import asyncio
import aiohttp

async def get_data(server_endpoint):

    payload_in = {'search_term': search_input.value.strip()}

    async with aiohttp.ClientSession() as session:
        async with session.post(server_endpoint, json = payload_in) as response:
            payload_out = await response.json()
            return pd.DataFrame(json.loads(payload_out['data']))

    return(result)

# 1(a)
async def get_df(clicked):

    server_endpoint = 'ht'

    if clicked:
        result = await get_data(server_endpoint)
    else:
        result = pd.DataFrame({'Result': ['Awaiting Search']})

    return(result)

pn.extension()

search_input = pn.widgets.TextInput(name = "Enter Search Term")
search_button = pn.widgets.Button(name = "Search", button_type = "primary")

# 1(a)
df = pn.panel(pn.pane.DataFrame(pn.bind(get_df, search_button)), loading_indicator = True)

app = pn.Column(
    "# Search", 
    search_input, search_button,
    "## Results",
    pn.pane.Markdown('### '),
    df,
)

app.servable()
2

Here’s a few resources:

https://panel.holoviz.org/how_to/param/examples/loading.html

You can even do something like:

with app.param.update(loading=True):
    ...
3

Thanks!