Monitor live computation progress with Plotly

I’d like to use Plotly inside monitor functions of computational routines, e.g. finding a global minimum of a function, solving ODE, etc… For this, I must be able to perform online updates on traces. Below is a minimal example of trying to move a marker, superimposed over a heat-map.
NOTE: assume the new marker coordinates are obtained at runtime (possibly by calling an expensive routine), so we do not have all the curve the marker will trace.

Question 1: steps of for-loop are being skipped, unless I invoke time.sleep() to wait for figure to update. Why does this happen?
Question 2 How can I force the entire figure to re-draw and not increment the for-loop index, unless the figure has re-drawn?
Question 3 Is there a better way to do the online update of the marker position?

I run the code below in 2 Jupiter Lab cells.

Jupyter Cell 1: Plot a heatmap of sin(x)cos(y); superimpose marker at x=1, y=0

import numpy as np
import plotly.graph_objs as go
from time import sleep

x = np.arange(0,2.*np.pi,np.pi/100)-np.pi
y = np.arange(0,2.*np.pi,np.pi/100)-np.pi

xx, yy = np.meshgrid(x,y)
zz = np.sin(xx)*np.cos(yy)

fig = go.FigureWidget(layout_width = 400, layout_height = 400)

fig.add_heatmap(x = x, y = y, z=zz, colorscale = 'blues')

fig.add_scatter(x=[1.], y=[0], 
            marker_color = 'red',
            marker_size = 10)


Jupyter Cell 2: force the marker to trace a semi-circle

N = 10
for i in range(N+1):
    with fig.batch_update():[1].update(x=[np.cos(phi)],y = [np.sin(phi)])
        fig.layout.title.text = 'i='+ str(i)