Lag in click event

I am trying to build a very basic data labeling tool using dash. I have a bunch of buttons which basically represent the list of labels. The labeling process basically is toggling the “selected” status of the button. If the button is clicked, its color changes and green color means it is selected. Clicking the button again removes it from selection. Now this solution is completely functional but the issue is that there is a bit of lag from when I click a button to when the click reflects (i.e. the color of the button changes). The lag is about 300-350 milliseconds, which I understand is not a lot but it still stops the user from having a seamless experience and that too when there is no large data involved at the moment. To my expectations, just the click of a button shouldn’t take this long to render in the front end. Am I doing something inefficiently in the code/callback here?

Here are some key code components I have in the app.


sentences = ["1",'2','3,','4','5','','6','','6','6','6']
labels = ["a","b","c","d","e","f"]

tags = html.Div(
    id="tags",
    children=[
        html.Button(
            id={
                "type": "tag",
                "index": index
            },
            className="tag",
            children=f"{label}"
        )
        for index,label in enumerate(labels)
    ]
)
@callback(
    Output(component_id={"type":"tag", "index": MATCH}, component_property="style"),
    Input(component_id={"type":"tag", "index": MATCH}, component_property="n_clicks"),
    prevent_initial_call=True
)
def toggle(nclicks):
    return {"background-color": "RGBA(50,80,80,1)", "color": "ghostwhite"} if nclicks % 2 == 1 else {"background-color": "RGBA(240,240,240,1)", "color": "black"}

The lag is due to the network round trip needed to invoke the Python code in the callback. If you want an instant update, you should rewrite the callback as a clientside callback (i.e. in JavaScript).

1 Like