Prevent Background Page Refreshing when Editing Modal

Dash Python
1

I am trying to create a simple modal with a TextArea that displays the number of characters remaining under it. The callback works as intended and the code is displayed below. However, the background page keeps refreshing and flashes which is annoying. How do I prevent the background page behind the modal from refreshing?

Some additional information, I am building a multi-page app and the modal exists on one of the pages. Also, the entire app is rolled into a dcc.Loading object, which is how I can tell that it’s refreshing, but I don’t think removing it wil change anything.

@callback(
    Output({'type':'charlimit', 'index':MATCH}, 'children'), 
    [Input({'type':'comments', 'index':MATCH}, 'value')],
)
def get_charlimit(value):
    patched_charlimit = Patch()
    if value is None: 
        return f"{CHARLIMIT}"
    else: 
        patched_charlimit = f"{CHARLIMIT - len(value)}"
        return patched_charlimit
2

Ok, so the issue was related to dcc.Loading. I used an LLM and it suggested creating a callback to prevent it for just that one component. Show below:

@callback(
    Output('loading_page_content', 'display'),
    Input({'type':'comments', 'index':ALL}, 'value'),
    prevent_initial_update=True
)
def toggle_loading(value):
    if value: 
        return 'hide'
    else:
        return 'auto'```
1 Like