Phantom header on initial chat bot post

[subvertmagazine]

anyone else get this issue in the chatbot app where the header is replicated after you type your first question into the chatbot? it only happens on the first one, where there’s empty screen space, but it looks really bad.

If you’re creating a debugging post, please include the following info:

1. Share the link to the public app (deployed on Community Cloud).
2. Share the link to your app’s public GitHub repository (including a requirements file).
3. Share the full text of the error message (not a screenshot).
4. Share the Streamlit and Python versions.

[subvertmagazine]

I fixed this by only showing the header if a question has not yet been asked.

Only show header/description if there are no user messages yet

if not any(msg[“role”] == “user” for msg in st.session_state.messages):
st.title(“Paul’s Chatbot v0.5”)
st.markdown(“”"
This chatbot can answer questions about your documents.
Ask any question about the content in your documents! This demo is focused on a psychology book. Ask it questions about how the human brain works, how to stick with a habit, or how we are easily fooled.
“”")

[mathcatsand]

Just fyi, this is called a stale element. When Streamlit reruns, it “stales” everything on the page and draws over everything in order. (This is for efficiency so it’s not reconstructing everything on the front end from scratch if it doesn’t have to.) Only when it gets to the end of the script run does Streamlit discard any leftover stale elements. That means when you remove an element from one run to the next and have a longer script run, you may see a lingering stale element. This often happens when you use spinners, for example, because they exist on one script run and not the next.

Streamlit Spinner and Chat Message odd interaction

The faded element is what we call “stale.” Streamlit removes stale elements when it knows they won’t be re-rendered. Streamilt keeps track of elements by the order they appear on the page. Consider this very simplified example. If one script run renders: A title A header A chart A button And the next script run renders: A title A chart A button Streamlit will briefly have two charts at step 2 of the rerun (when it replaces the header with the new chart). Then, when the button renders, it …

[subvertmagazine]

Appreciate the explanation.
Are you saying there’s no known fix? Or is it the spinner that’s causing it?
It’s a weird one because it doesn’t happen every time, I tried a couple of fixes and thought I’d got it, but then it randomly pops back. It looks kinda clunky, especially on people’s first impression of using it.
The fact that it’s transparent is interesting, if something knows it needs to make it transparent, can’t we make it so that something makes it invisible until/unless its actually required or before its deleted?
Thanks for the reply.

[mathcatsand]

You can fix it, but it requires boilerplate code to manually clear out the element or make sure there is a null replacement for the missing element on the rerun.

However, the team is aware that is causes problems (especially for chat) so hopefully this will be a better experience in the future. You can upvote a feature request for a command to “close” containers, thereby wiping any remaining stale elements from them during a run so you don’t have to wait for the end of the script run to clear all stale elements from the whole page: `st.close()` or `st.end()` to close or mark the end of a container and remove stale elements (like a frontend version of `st.stop()`) · Issue #10126 · streamlit/streamlit · GitHub