Updating chart data using external API hangs UI and shows loading spinner

[n-srinidhi]

Hi!I have a form_card where I am rendering a bubble chart via custom HTML using ui.frame() component. I'm accessing external APIs using python aiohttp module, However my UI hangs and Im getting a loading spinner till the data is rendered. I am using asynchronous methods everywhere but to no avail. How can i do this without blocking the UI?

async def fetch_and_update_bubbles(q: Q, from_date_api: str, to_date_api: str):
       async with aiohttp.ClientSession() as session:
                async with session.get("https://app.century.ae:10100/analytics/UserBehaviour",headers={"Authorization-Token": token},params={"Server": "LIVE", "From": from_date_api, "To": to_date_api}) as req2:
                         if req2.status == 200:
                               product_data = await req2.json()

                bubbles_html = await generate_bubble_chart_html(product_data)
                q.page['bubble'].bubble_search.content = bubbles_html

generate_bubble_chart_html() creates expected bubble chart and returns HTML code which is passed to the frame component in the q.page['bubble'] page.

[mturoci]

I'm accessing external APIs using python aiohttp module, However my UI hangs and Im getting a loading spinner till the data is rendered.

Hard to be sure without a min repro, but my guess is your API call / chart build takes too long which causes the spinner.