How to get clientside callback to complete before other callbacks

Dash Python
1

I would like to get the users timezone in order to display info on the page relevant to their timezone. The issue I have is that I cant seem to get the users timzone from a clientside callback on the initial load of the site. Subsequent loads of a page seem to work. Is there a way that I can ensure a clientside callback / dcc.Store is populated before my other callback is fired?

Here’s a pseudo app that demonstrates my issue:

#User TZ Test
import dash
from dash import dcc, html
from dash.dependencies import ClientsideFunction, Input, Output, State
from dash import callback_context, no_update

app = dash.Dash('test',title='test',update_title='Loading...',serve_locally=True,suppress_callback_exceptions=True)
server = app.server

#Objects for app
main_app = dict()
main_app['url'] = dcc.Location(id='website_url')  #Current URL
main_app['user_tz'] = dcc.Store(id='user_tz',storage_type='session') #Current users timezone
main_app['loading'] = dcc.Loading(id='website_loading',type='default',fullscreen=True,children=html.Div(id='website_loading_output')) #Show a loading animation while page loads
main_app['current_page'] = html.Div(id='website_current_page') #Page content, which will show loading animation while its being loaded

##Main App Layout
app.layout = html.Div([v for v in main_app.values()])

##Clientside javascript functions
#Get users timezone, output it to the user_tz datastore
app.clientside_callback('''
						function get_user_tz(id) {
							return Intl.DateTimeFormat().resolvedOptions().timeZone;
							}
						''',
						Output('user_tz','data'),
						Input('user_tz','id'),
						)

@app.callback([Output('website_current_page','children'),
				  Output('website_loading_output','children')],
				  [Input('website_url','pathname'),
				  Input('website_url','search')],
				  [State('user_tz','data')])
def display_page(current_path,current_search,current_user_tz):
	changed_inputs = [x.get('prop_id') for x in callback_context.triggered]
	if 'website_url.pathname' in changed_inputs or 'website_url.search' in changed_inputs:
		print('test')
		print(current_user_tz)
		return [html.Div('Test page.  Current User TZ is {}'.format(current_user_tz)),None]
	else:
		return no_update


##Main run server call
if __name__ == '__main__':
	app.run(host='localhost',port=8000,debug=True)

Running the app the first time outputs a page that shows:

Test page. Current User TZ is None

When i refresh the page, the output is:

Test page. Current User TZ is America/Los_Angeles

2

Hi @zachmorris

Try changing this to a Input instead of State:

Then the first line of the callback can be something like:

if current_user_tz is None:
        return no_update, no_update
3

Thank you, updating it to an input seemed to fix the issue.