TabBar Disappears on Page Refresh with extra_streamlit_components

[dongbang_ban]

Hello Streamlit Community,

I’m encountering a peculiar issue with the TabBar component from the extra_streamlit_components library, where it disappears every time I refresh the page. However, this behavior only occurs when login-related features are enabled in my application. If I disable these login functionalities, the TabBar remains visible and functions as expected upon page refresh.

Here’s a brief overview of my situation:

1. The TabBar is implemented using extra_streamlit_components.TabBarItemData to define tabs, with a default tab specified and a unique key for each instance.
2. I’m managing the state of the selected tab using Streamlit’s session state, aiming to preserve the tab selection across page refreshes.
3. The issue arises when login features are integrated. Without these login functionalities, the TabBar works perfectly fine, even after refreshing the page.

Given this, I’ve checked that my Streamlit and extra_streamlit_components versions are up to date, and I’ve looked for any errors in the console or network issues without finding anything that clearly indicates what’s going wrong.

Could anyone provide insights into why enabling login features would cause the TabBar to disappear on refresh, or suggest any potential solutions to keep the TabBar visible after a page refresh with login functionalities enabled? I would greatly appreciate any advice or tips from the community.

Thank you in advance for your help!

1. first_main.py

def main():

    st.set_page_config(layout="wide", page_title = 'Write your Page Title' , page_icon=":memo:")

    
    st.header('First Page')

    with st.sidebar:

        config = login_module.get_conf()
        login_module.login_check(config)



    with st.container():
        if st.session_state.get('authentication_status'):


            st.write('where is tab bar')
            unique_key = "tab_bar_" + str(os.getpid())
            chosen_id = stx.tab_bar(data=[
            stx.TabBarItemData(id="tab1", title="01.PAGE", description="description"),
            stx.TabBarItemData(id="tab2", title="02.PAGE", description="description"),
            stx.TabBarItemData(id="tab3", title="03.PAGE", description="description")
            ],default = "tab1" , key =unique_key)
            

            data_loader = get_databricks_data()
            data_loader.load_all_data()

            if chosen_id == "tab1":
                load_and_run_module("first_tab", "run_sum_main",data_loader)
            elif chosen_id == "tab2":
                load_and_run_module("second_tab", "run_anomaly_main" ,data_loader)
            elif chosen_id == "tab3":
                load_and_run_module("third_tab", "FirstContents" ,data_loader)

2. lgn.py

import streamlit as st
import streamlit_authenticator as stauth
import yaml
from yaml.loader import SafeLoader


def get_conf():
    """
    config.yaml 파일 정보 갖고오기
    """
    with open('.streamlit/config.yaml') as file:
        config = yaml.load(file , Loader = SafeLoader)

    return config


def login_check(config):
    authenticator = stauth.Authenticate(
        config['credentials'],
        config['cookie']['name'],
        config['cookie']['key'],
        config['cookie']['expiry_days'],
        config['preauthorized']
    )
    authenticator.login()
    if st.session_state['authentication_status']:
        authenticator.logout()
    elif st.session_state['authentication_status'] is False:
        st.error('Username/password is incorrect')
        st.stop()
    
    elif st.session_state['authentication_status'] is None:
        st.warning('Please enter your username and password')

        st.stop()

[osasumwen.okundaye]

Hello @dongbang_ban,
I came here looking for a solution, the problem has been a headache for days. But it appears I solved it and I hope this will help you. The TabBar’s time to paint or render is slow so it gets left behind in a refresh, especially during logins. So I tried this code to wait for it to render.

# This hack solves the invisibility of stx.tab_bar on first load
    with st.spinner('A little house keeping...'):
        time.sleep(1)
        chosen_id = stx.tab_bar(data=[
            stx.TabBarItemData(id=1, title='🧠 Predict', description=''),
            stx.TabBarItemData(id=2, title='🔮 Bulk predict',
                               description=''),
        ], default=default)

Good luck!

[osasumwen.okundaye]

Increase the time to sleep till the result is consistent. 1 second was sufficient for my page.