Browser tab hangs when (async) refreshing streamlit pages

[dufferzafar]

Streamlit doesn't have a nice built in way of refreshing the pages.

There's streamlit-autorefresh but it is a very hacky way.

I like to use the following async event loop based pattern:

import asyncio

import pandas as pd
import streamlit as st
from st_aggrid import AgGrid

def main():
    try:
        asyncio.run(run_async())
    except Exception as e:
        print(f"error...{type(e)}")
        raise

async def run_async():
    while True:
        # Assume this line could be something like:
        # df = await refresh_data_from_source()
        df = pd.DataFrame({"a": [1,2,3], "b": [1,2,3]})

        # This works well!
        # st.dataframe(df)

        # This does not: AgGrid never shows up!
        AgGrid(df)

        await asyncio.sleep(10)

if __name__ == "__main__":
    main()

Though it works well with the built in dataframe viewer. It doesn't work with this AgGrid setup.

What ends up happening is that the browser tab gets hanged / stuck. I ran a browser profile which pointed me to the JsCode object - so essentially, we resend the code object on every refresh and browser just stays busy in loading that 5 MB JS object!

[PablocFonseca]

Try setting a height to the grid. Did it work when not async? I've never saw async calls on streamlit before. I always used @cache decorators

[dufferzafar]

Yes, it does work when not async, but we don't get the refresh behavior we need. I'll try setting the height

Is it not possible to load the JS object only once? because that is not gonna change!

And only send the data to the UI that is actually changing? Like what happens for the default streamlit.dataframe class.

[PablocFonseca]

To avoid grid reloading, set a fixed key when calling aggrid. e.g AgGrid(...,key="grid1")

This reload behavior comes from streamlit.

If grid key is set and data or gridOptions change, the grid will update without reloading.