Problem

Today, to inform a user that something is happening (and that we can't compute when it'll complete), we can put a st.spinner() somewhere on the page. We also would like to disable the button, so the user don't retrigger the behaviour by frustration (else we need to handle it in code). The most efficient way in the current architecture is to use a combination of session state and callback on buttons to handle these behaviours (click on button > disable button > show spinner in the same st.container() as button OR replace button > display result and restore button)

Whilst good in most cases, it is not as elegant as combining all this with the isLoading behaviour of base web. See : https://baseweb.design/components/button/ and toggle Primary.

Solution

MVP: A new argument can be added to the st.button() api : loading or is_loading, set to False by default. Setting it to True would toggle the behaviour to show a spinner instead of the original label. Loading animation should display well on Primary, Secondary and ideally Tertiary (to cover all cases) (see #6414) styles.

Possible additions: Adding a small text input next to the spinner would be great for customizability (🔥Computing, 🤞 Hang on...) , and added with another argument loading_message, put to the right of the spinner.

Additional context

Loading Primary

Loading Secondary

Loading Tertiary

Community voting on feature requests enables the Streamlit team to understand which features are most important to our users.

If you'd like the Streamlit team to prioritize this feature request, please use the 👍 (thumbs up emoji) reaction in response to the initial post.