import time
import panel as pn
import holoviews as hv
import numpy as np

pn.extension(loading_spinner='dots', loading_color='#00aa41', sizing_mode="stretch_width")

button = pn.widgets.Button(name="Update", margin=(0, 32, 0, 57), button_type="primary")

def random_plot():
    return hv.Points(np.random.rand(100, 2)).opts(
        width=400, height=400, size=8, color="#838383")

hv_pane = pn.pane.HoloViews(random_plot())

def update(event):
    with pn.param.set_values(hv_pane, loading=True):
        time.sleep(1.5)
        hv_pane.object = random_plot()
    
button.on_click(update)

component = pn.Column(button, hv_pane)
component

pn.template.FastListTemplate(
    site="Panel", 
    title="Loading Spinner", 
    main=[
        """**Every pane, widget and layout provides the `loading` parameter**.\n\nWhen set to `True` a spinner will overlay the panel and indicate that the panel is currently loading. When you set `loading` to false the spinner is removed.\n\nUsing the `pn.extension` or by setting the equivalent parameters on `pn.config` we can select between **different visual styles and colors** for the loading indicator.""",
        component
    ], main_max_width="768px",
).servable();