trouble loading the streamlit_ace.ace component about streamlit-ace

[okld]

Hello @iamashwin99,

Hmm, weird indeed. Maybe Ace takes time to load, and Streamlit timeout is too short.
Gonna have a deeper look a little bit later, as this may affect other components too.

I just checked a few times now, I couldn't reproduce the issue though.

[iamashwin99]

I just checked a few times now, I couldn't reproduce the issue though.

did you try it out here https://back-plt.herokuapp.com/ or https://share.streamlit.io/iamashwin99/back-plt/main/main.py ?

If they are working as expected, could you try throttling network and try again?

[erumoico]

I tried your URLs and I gave the same problem at both of them. I upgrade streamlit on my machine to version streamlit-0.75.0 and now I have the same problem with my app. So I also interest what is the problem.

Before the upgrade (from version streamlit-0.74.1), it sometimes happened that the component did not fully load. In this case, only component's public/index.html was loaded without anything in <div id="root"></div> tag. But maybe it is a different issue.

Hmm, weird indeed. Maybe Ace takes time to load, and Streamlit timeout is too short.

How can I increase the timeout?

[iamashwin99]

@erumoico are you using st.columns somewhere in your app?
I started getting these issues when I used them and when I removed the columns and just pushed the content one below the other the error seems to go away, I still, however, don't think that's the cause.

Edit: it really didn't solve the issue, I just had a streak of no issues, st.columns has nothing to do with this

[erumoico]

At first I should tell, that I sped up my component and now yellow warning box about troubles with loading disappear. (I sped up it simply with move files of streamlit and my component to faster medium.)

Now I only have a trouble with empty <div id="root"></div> tag in my component, so maybe I should post my issue on the streamlit issue tracking.
Edit: Here it is streamlit/streamlit#2720

Now, to your hint. Yes, I have my component inside a column of st.beta_columns(). So, I tried it, but <div id="root"></div> tag of my component is still empty sometimes. But I thank you for your effort.

[erumoico]

I have found the timeout at streamlit/frontend/src/components/widgets/CustomComponent/ComponentInstance.tsx:52:

export const COMPONENT_READY_WARNING_TIME_MS = 3000

Unfortunately, I haven't found how to set it up yet without interfering with the streamlit code.

[amrrs]

strangely, removing st.beta_columns from my code fixed the same issue (after reading this thread) so thanks @iamashwin99 @erumoico 🎉

[okld]

As highlighted by @erumoico, a solution would be to change components' timeout in streamlit. Thank you for opening the issue on their side (streamlit/streamlit#2888).

[okld]

This pull request should fix the issue: streamlit/streamlit#3315.
The component will still be able to load even if the COMPONENT_READY timeout is reached.

[amrrs]

Thanks @okld