Dragging zoom box freezes interval component

Dash Python
1

I am trying to create a dashboard where a figure gets updated on an interval, but the zooming keeps unchanged on updates. The problem is, if I am dragging the zoom box while the interval fires, zooming doesn’t work. If I keep dragging even longer, over a few intervals, the interval component seems to hang completely. It recovers when I double click the figure to reset zooming. Below is a simple piece of code to reproduce the problem.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

fig = {'data': [{'x':range(100), 'y':range(100)}], 'layout': {'xaxis': {}, 'yaxis': {}}}

app = dash.Dash()
app.layout = html.Div([
                dcc.Interval( id='interval-component',
                              interval=1*1000, # ms
                              n_intervals=0 ),
                dcc.Graph( id='live-fig', figure = fig)
                ])
        
@app.callback( Output('live-fig', 'figure'), 
               [Input('interval-component', 'n_intervals')],
               [State('live-fig', 'relayoutData')] )
def update_on_interval(n, relayout_data):  
    live_fig = fig
    
    if relayout_data is not None and 'xaxis.range[0]' in relayout_data:
        x0 = relayout_data['xaxis.range[0]']
        x1 = relayout_data['xaxis.range[1]']
        live_fig['layout']['xaxis']['range'] = [x0, x1]
        live_fig['layout']['xaxis']['autorange'] = False
    else:
        live_fig['layout']['xaxis']['autorange'] = True

    return live_fig

app.run_server()

Any ideas why this happens and is there another way to implement the functionality I am after, i.e. be able to zoom in to a live updating figure without having to be super fast?