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

Hide initial dcc.graph

The initial graph display a big graph with nothing before actual callback is triggered. How can I hide this?
I have reduced the component to a minimum and yet it still displays the graph.

server = flask.Flask(__name__)
app = dash.Dash(__name__, server = server, 
                external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
    html.Div([
     dcc.Graph(id='graph',
    )]),
])

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

Also the actual layout will be:

    dcc.Loading(
    id="loading-1",
    children=html.Div([
     dcc.Graph(id='graph'
    )])

I know you can return Graph style in the callback from invisible to visible, is there a similar way do it “figure” component?

Thanks in advance.

You could

  1. leave the children property [] and return the dcc.Graph object as the output of your callback
  2. hide the html.Div component that contains the dcc.Graph - the output of your callback generating the graph could also return the appropriate style to hide/show the html.Div