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[‘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.
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
You may find this interesting: