Is it possible to speed up initial loading?

[CHerSun]

@nicedouble thank you again for the package. It's awesome. Really love it. And thank you for adding Chips, was missing flags-like multiselect.

One question though, it takes quite some time for antd components to show up on page refresh. Is there any way to speed this up? Maybe some kind of caching? Or including antd source locally in a package maybe? Sorry, not fluent in JS myself.

[nicedouble]

@CHerSun ,I'm looking for ways to speed up the loading and interactive use of individual components. I'm currently trying react's memo. If successful, all components will be updated. Also, be aware that if you use too many sac components, the page will load slower because each component is inside an iframe element.

[CHerSun]

@CHerSun ,I'm looking for ways to speed up the loading and interactive use of individual components. I'm currently trying react's memo. If successful, all components will be updated. Also, be aware that if you use too many sac components, the page will load slower because each component is inside an iframe element.

@nicedouble Yes, I have a few places where I use multiple Segmented components (permissions page). That's where it's the more notable, but even for single component - it appears well after all streamlit widgets were rendered. Thank you for looking into this.

[antoineglr1]

Hello @nicedouble and thanks for this great extension! I'd like to comment on this point because I'm currently experiencing the same problem with the sac.menu function. When clicking on the drop-down button, there's a display lag on the last items. To be more precise, I have a menu containing around ten sac.MenuItem items and the last 4/5 items take half a second to appear, while the other items defined before appear immediately. It's probably because the js code only allows instant display of a fraction of the items. A very ugly and not at all optimized "quick fix" to remedy this is to add white lines after the last sac.MenuItem so that the visible items are displayed instantly. Like in the example below :

    ## add whitespace to fix formating
    for idx in range(100):
        l_items_white_space.append(sac.MenuItem(''))

    menu = sac.menu(

        items=[
            sac.MenuItem('home', icon='house'),
            sac.MenuItem('menu 1', icon='database', children=[sac.MenuItem('submenu 1'),
                                                                       sac.MenuItem(label='submenu 2', children=[sac.MenuItem('subsubmenu 1'),
                                                                                                                 sac.MenuItem('subsubmenu 2'),
                                                                                                                 sac.MenuItem('subsubmenu 3')]),
                                                                       sac.MenuItem('submenu 2'),
                                                                       sac.MenuItem('submenu 3'),
                                                                       sac.MenuItem('submenu 4'),
                                                                       sac.MenuItem(label='submenu 5', children=[sac.MenuItem('subsubmenu 1'),
                                                                                                              sac.MenuItem('subsubmenu 2'),
                                                                                                              sac.MenuItem('subsubmenu 3'),
                                                                                                              sac.MenuItem(
                                                                                                                  'subsubmenu 4'),
                                                                                                              sac.MenuItem(
                                                                                                                  'subsubmenu 5')]),
                                                                       sac.MenuItem('submenu 5'),
                                                                       sac.MenuItem('submenu 6'),
                                                                       sac.MenuItem('submenu 7'),
                                                                       sac.MenuItem('submenu 8')]),
            sac.MenuItem(label='menu 2', icon='cpu'),
            sac.MenuItem(label='menu 3', icon='pie-chart', children=[sac.MenuItem('submenu 1')]),
            sac.MenuItem(label='menu 4', icon='rocket-takeoff', children=[sac.MenuItem('submenu 1'),
                                                                                     sac.MenuItem('submenu 2')]),
            sac.MenuItem(label='menu 5, icon='gem'),
            sac.MenuItem(label='menu 6', icon='life-preserver')
        ] + l_items_white_space,
    )

Do you have a better solution to fix this problem that I could implement on my own ? Thank you again for your product, I'm looking forward to seeing the future display improvements :)

[CHerSun]

@antoineglr1 yeah, there's such behavior, I see it too, but it doesn't look to be the same issue. I'm pretty sure that menu issue is on the streamlit side - on how it handles rendering area size change from a custom component. Would be nice for a better rendering there ofc. Maybe not until they introduce v2 components API (on roadmap).

[iuiu34]

Hi, any improvements on this? Or is not feasible until st releases components v2? As stated here, the slowness raises a st warning., and prevents from using this great component in production

thanks