Is there a way to trigger load on initial page load only and not every time a change is made to the page?

My page content is wrapped in a parent Loading component that gets triggered every time a change is made to the page. I only want this Loading component to be triggered on the initial page load only. How do I go about doing that?


AFAIK there is no simple way to do it for now… Here is a discussion that might be helpful, but I never tested it.


You could possibly do the following:


Generally on page load the callback is fired because the component is initialized not necessarily the input has a value. So check the ctx.triggered[0][‘value’]. If it’s none then do something, if it is a value then return dash.no_update. That will keep the callback from changing the output.

1 Like

Another approach would be to create a dummy div somewhere on the page, with no contents, and set up your callback to to have an input from the children of that dummy div. Since the div will never have any children, the call back will only get triggered on page load and never again.

Hope that helps.


Thank you for the reply. I ended up going with this approach.

I stumbled upon this question and found another solution for myself, which has not been available at the time the thread was opened.

Via callback context (ctx) one can get a list of dictioniaries (one for each input in the callback) which shows which input triggered the callback (key 'triggered). In case the page loads for the first time all inputs have ‘triggered’ set to True. In my case I have four dropdown menus on my page. In order to check whether the page has just loaded, I just count whether there is more than one prop with ‘triggered’ == True:

from dash import ctx

cb_trigger = ctx.args_grouping

cnt = 0

for i in range(0, len(cb_trigger)):
    if cb_trigger[i]['triggered'] == True:
        cnt += 1

if cnt > 1:
    page_load = True
    page_load = False

Hello @Max3,

You may find this interesting:

1 Like