Reactive card button that works despite great lag to server

[evnchn]

I'm in Europe, and my server's in Asia, so I feel the lag.

Excerpt from my project.

with ui.card().classes("maincard") as main_card: # class maincard is needed to identify the card in the JS handler
    main_card.on("click", handle_click) # your typical event handler via NiceGUI, this will not be sped up
    main_card.on("click", js_handler="""
        (evt) => {
            let element = evt.srcElement;
            while (element && !element.classList.contains('maincard')) {
                if (element.classList.contains('nontouch')) {
                    return; // to ignore buttons inside the card
                }
                element = element.parentElement; // to find the maincard
            }
            if (element) {
                element.classList.remove('opacity-100');
                element.classList.add('opacity-50');
                setTimeout(() => {
                    element.classList.remove('opacity-50');
                    element.classList.add('opacity-100');
                }, 250);
            }
        }
    """) # this creates immediate reaction on the client side, no need to wait for the server

Because of the lookout for the correct element, it will work even when there are nested elements in the card.

If there are other buttons in the card, you can apply a class which causes the JS handler to immediately return and not show the animation.

[amks1]

I've faced similar issues. I wonder if removing/optimizing the frontend lag is something that the maintainers would consider as a next step for all UI elements.

[evnchn]

I think that awareness towards the issue is more important as of now, since it could be quite an overhaul...

For my applications, I now almost always do this (psuedocode)

attach_js_handler() # so that it immediately reacts without the server involvement
make_small_ui_changes() # like immediately serving a ui.card() with maybe a ui.spinner() inside, nothing bandwidth or computationally heavy
await ui.run_javascript("1+1") # forces NiceGUI to stop doing anything, push a JavaScript execution message to the client, as well as the UI changes
make_big_ui_changes() # most of the business logic, cranking out the data
await ui.run_javascript("1+1") # same

It would be super-nice if this is included in the framework!!! But it's going to be quite a lot of work...

[evnchn]

You already know about the attach_js_handler() part, lets focus on the below parts.
It will be something like:

with ui.card(): # here's where I want my content
    with ui.column().classes("w-full justify-center items-center") as loading_label:
        ui.spinner('dots', size='30px', color='red')
    await ui.run_javascript("1+1", timeout=20) # spinner gets shown to the user immediately
    loading_label.delete()

    # await asyncio.sleep(10) # simulate a long loading time
    render_a_bunch_of_data() # finally the data element is rendered!
    await ui.run_javascript("1+1", timeout=20) # push the change to the client, in case you have something going on

[evnchn]

Actually, a await flush_queue would help
because await ui.run_javascript waits for the client to respond, which it is not responding with useful data anyways
ui.run_javascript (the non-blocking one) does not have this flushing effect either

[falkoschindler]

Thanks for sharing this example, @evnchn!

If I understand correctly, you're defining a JavaScript event handler to add an immediate click animation. But as far as I know, a regular button should behave identically: The animation is triggered on the client before an event is sent to and processed on the server.

[evnchn]

Actually I wasn't using the regular button, as in our project, the UI/UX team (which I'm also in 😅) had me assign the entire card to be sensitive as a button input (with exception of the buttons on the card)