TangleSpace / hydralit

A library to create multi-page Streamlit applications with ease.
Apache License 2.0
202 stars 19 forks source link

Loaders and spacing #23

Closed rblumenowgs closed 2 years ago

rblumenowgs commented 2 years ago

Hi there! This package is great.

Two quick questions: I've integrated an existing app into Hydralit, but the top menu is appearing about an inch below the top of the screen. Is there a way to move it to the top?

And, when I load a page/app I get all three loaders with the large text that is is "Loading now". Is there a way to customize which loader shows and remove/format the text?

TangleSpace commented 2 years ago

Hi,

Thanks for the kind words, much appreciated.

Answers to your questions in order:

  1. hehe, this issue came from Streamlit v.1.5.x they decided to add extra padding at the top and sides, there are two ways to resolve this.
    • You can drop back to Streamlit v1.3.1 and the problem will instantly go away.
    • You need to remove the addtional padding with some CSS hack. Even the Streamlit people have suggested this solution, what a piece of shit...... atleast in my opinion. Specifically, you need to add this to your main app code, this should remove the extra padding.
hide_streamlit_style = """
<style>
    #root > div:nth-child(1) > div > div > div > div > section > div {padding-top: 0rem;}
</style>
"""

st.markdown(hide_streamlit_style, unsafe_allow_html=True)
  1. Absolutely you can configure the way the application transitions occur any way you like, including what loaders appear. In the Hydralit Example repo, you can see a custom loader app is being added, this is where and how you configure how you want to see transitions/reruns etc. between apps. Specifically, you simply create a custom loader app as per the template here and add it to your app like this: app.add_loader_app(apps.MyLoadingApp())

Whatever logic, loaders and general appearance you wish to have, even custom loaders, nothing at all or something else entirely depending on which app is loading can be configured in the custom loader, once added with the line above, it will all just work. The example shows that when a specific app is being loaded, a different loader/spinner will appear, for everything else it will use the same loaders and if it is another specific app, you don't see a loader appear at all.

Hope that helps, thanks for the support.

chraibi commented 2 years ago

New user of this amazing app. Thank you very much for your efforts

bastos12 commented 2 years ago

wonderful job @TangleSpace you are a genius !!!