Spin until page is loaded

Custom Components
1

I want st.spinner() to keep spinning until an Altair chart is fully rendered. st.altair_chart() takes less than one second to complete at which point the spinner stops. However, there’s a four second delay until the chart appears. The delay is confusing to the user (and me too).

Questions:

  1. Is it normal to take 4 seconds for a chart to appear after altair_chart() completes? Seems like a simple bar chart that shouldn’t take that long on a high performance computer. Is such a delay due to page rendering time?
  2. How can I make the spinner continue to spin until the chart appears? Is there a streamlit compatible way to delay until page is loaded?
2

I’ve stumbled across the reason for the delay. st.altair_chart() first renders a default size chart and, if use_container_width=True is used, renders a second time to the container width which takes 4 seconds. The initial size rendering display was suppressed by a st.caption() just before altair_chart(). When I removed caption(), I could see the double rendering.

So three problems:

  1. caption() suppresses the initial rendering.
  2. caption() output appears horizontally until the chart is rendered, then corrects itself. Is it because I’m creating a horizontal bar chart?
  3. There’s a double rendering with the second rendering taking 4 seconds.