Black Lives Matter. Please consider donating to Black Girls Code today.

Mapbox map loads quickly in older version of Dash but not on latest version

Hi Dash Community, I am trying to build an app with dash. When I use latest version of dash(1.4.1) and dash core components(1.3.1), the mapbox map is taking longer time (more than 5 mins) to load. When I use older version of dash(0.28.5) and dash core components(0.28.0), it is taking 5 to 7 seconds. But I can’t add loaders with these older versions as loader component is introduced in latest versions.

Please help me to load mapbox map quickly with latest versions or is there any way to add loader in dash app with older versions? I searched on web but couldn’t find any solution. My code is below

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
import numpy as np
import re
import json
from itertools import chain
import plotly.express as px
import plotly.graph_objects as go

app = dash.Dash(__name__)

server = app.server

with open('ed.geojson') as geofile:
    j_file = json.load(geofile)

df = pd.read_excel('loc_crs.xlsx', 'summary')
df2 = pd.read_excel('loc_crs.xlsx', 'combined')

mapbox_access_token = open(".mapbox_token").read()

app.layout = html.Div(children=[

    html.Div([

        html.Iframe(id='map',
                    srcDoc=open(
                        'F:/e_map/python/e_dash_board/choropleth_map.html', 'r').read(),
                    style={'border': 'none', 'width': '100%', 'height': '100%'}),

        
    ], style={'height':500}),
    
    html.Div(children=[
        dcc.Graph(id='marker_plot')

    ], style={'width': '70%', 'float': 'left', 'border-style':'solid'}),
    html.Div([
        html.Div([
            html.Label('Service provider:'),
            dcc.Dropdown(
                id='service_provider',
                options=[{'label': 'All', 'value': 'All'}]+[{'label': i.title(), 'value': i}
                                                            for i in df2['Supplier_Name'].unique()],
                value='All'
            )
        ], style={'padding':'10px'}),

        html.Div([
            html.Label('Postcode District:'),
            
            dcc.Dropdown(
                id='district',
                options=[{'label': i, 'value': i}
                            for i in df['area_code'].values],
                value='B'
            )
        ], style={'padding':'10px'}),
        html.Div([
            html.Label('Zoom level:'),
            html.P(
                dcc.Slider(
                    id='zoom',
                    min=3,
                    max=15,
                    step=1,
                    value=5
                ))
        ], style={'padding':'10px'})
    ],style={'width':'25%','float':'right'})
    
])

@app.callback(
    Output('marker_plot', 'figure'),
    [Input('service_provider', 'value'),
        Input('district', 'value'),
        Input('zoom', 'value')])
def update_graph(ser_provider_value, district_value, zoom_value):

    latitude = df[df['area_code'] == district_value]['Latitude'][0]

    longitude = df[df['area_code'] == district_value]['Longitude'][0]
    print(longitude)
    print(zoom_value)
    if ser_provider_value == 'All':        
        traces=[]
        for ser_type in df2['Service'].unique():
            df2_st_data = df2[df2['Service'] == ser_type]
            traces.append(go.Scattermapbox(
                lat=df2_st_data['Lat'],
                lon=df2_st_data['Lng'],
                mode='markers',
                name=ser_type,                
                marker=go.scattermapbox.Marker(
                    size=13
                ),
                text=df2_st_data['Supplier_Name'],
            ))
        layout = dict(
            autosize=True,
            height=900,
            #width='100%',
            hovermode='closest',
            mapbox=go.layout.Mapbox(
                accesstoken=mapbox_access_token,
                style='basic',
                bearing=0,
                layers=[dict(
                    sourcetype='geojson',
                    source=j_file,
                    type='fill',
                    color='#F9E418',
                    opacity=1,
                    below="water"
                )],
                center=go.layout.mapbox.Center(
                    lat=latitude,
                    lon=longitude
                ),
                pitch=0,
                zoom=zoom_value
            ),
        )
    else:
        ser_provider_data = df2[df2['Supplier_Name'] == ser_provider_value]
        traces = []
        if len(ser_provider_data['Service'].unique())>1:
            for ser_type in ser_provider_data['Service'].unique():
                df2_st_data = ser_provider_data[ser_provider_data['Service'] == ser_type]
                traces.append(go.Scattermapbox(
                    lat=df2_st_data['Lat'],
                    lon=df2_st_data['Lng'],
                    mode='markers',
                    name=ser_type,
                    marker=go.scattermapbox.Marker(
                        size=13
                    ),
                    text=df2_st_data['Supplier_Name'],
                ))
                layout = dict(
                    autosize=True,
                    height=900,
                    hovermode='closest',
                    mapbox=go.layout.Mapbox(
                        accesstoken=mapbox_access_token,
                        style='basic',
                        bearing=0,
                        layers=[dict(
                            sourcetype='geojson',
                            source=j_file,
                            type='fill',
                            color='#F9E418',
                            opacity=1,
                            below="water"
                        )],
                        center=go.layout.mapbox.Center(
                            lat=latitude,
                            lon=longitude
                        ),
                        pitch=0,
                        zoom=zoom_value
                    ),
                )

        else:
            traces.append(go.Scattermapbox(
                lat=ser_provider_data['Lat'],
                lon=ser_provider_data['Lng'],
                mode='markers',
                marker=go.scattermapbox.Marker(
                    size=13
                ),
                text=ser_provider_data['Supplier_Name'],
            ))
            layout = dict(
                autosize=True,
                height=900,
                hovermode='closest',
                mapbox=go.layout.Mapbox(
                    accesstoken=mapbox_access_token,
                    style='basic',
                    bearing=0,
                    layers=[dict(
                        sourcetype='geojson',
                        source=j_file,
                        type='fill',
                        color='#F9E418',
                        opacity=1,
                        below="water"
                    )],
                    center=go.layout.mapbox.Center(
                        lat=latitude,
                        lon=longitude
                    ),
                    pitch=0,
                    zoom=zoom_value
                ),
            )
        
    
    return {'data':traces, 'layout':layout}

if __name__ == '__main__':
	app.run_server(debug=True)

This code is workig fine but it has performance issues.

I believe that the issue is this one: https://github.com/plotly/dash-core-components/issues/343

@chriddyp, I have installed following packages

dash  1.4.1
dash-core-components      1.3.1
dash-html-components      1.0.1 
dash-renderer             1.1.2

I cloned dash-core-components and tried to remove clone function around clone(figure.layout) in src\components\Graph.react.js , but I got no luck, such function is not there.
Any other ways to get performance back with latest versions or to add loader with older versions?