How can I add the loading animation on top of a map in Python Dash Leaflet?

Question

I have some Dash Leaflet code that when I click on the map, it puts a marker on the map. It then tells me where is the closest shopping mall to the marker on the map. It draws a straight line from the marker to the closest shopping mall

But it takes a few seconds to parse the 'shopping mall' csv. I would like to add a Loading animation on top of that map. This is where I struggle.

I can't add the animation on top of the Map, only below. I would like the animation to be on the map.

app.layout = html.Div(children=[
     html.Div(
            [dl.Map([
                dl.TileLayer(), 
                dl.LayerGroup(id="layer")
                ], center=(45.424, -75.716), zoom=12,
                id="map", style={'width': '100%', 'height': '85vh', 'margin': "auto"}),
                html.Br(),
                dcc.Loading(
                    id="loading-2",
                    children=[html.Div([html.Div(id="loading-output")])],
                    type="circle")
            ]
        )
])

@app.callback([Output("loading-output", "children"), Output("layer", "children")] , [Input("map", "click_lat_lng")])
def map_click(click_lat_lng):
    
    # Shopping mall lat lon
    _, _, sm_latlon = get_closest_shopping_mall(click_lat_lng[0], click_lat_lng[1])
    
    return None, [dl.Marker(position=click_lat_lng),
                  dl.Polyline(positions=[click_lat_lng, sm_latlon]),
                  dl.Marker(position=sm_latlon)]