So I’m having trouble with loading buttons right now.
I have a multi-page app with a sidebar exactly like this one from Tom’s Github:
https://github.com/facultyai/dash-bootstrap-components/blob/main/examples/multi-page-apps/collapsible-sidebar-with-icons/app.py
The thing is: my loading button needs to appear inside the sidebar. When any event happens at one of the pages, there should be a ‘loading icon’ inside the sidebar.
I understand I need a loading button in the form dcc.Loading(entire_page.layout) in my index.py page so it triggers when an event happens at that page, but I can’t figure it out how to place it in the place I need.
Here is my:
sidebar = dbc.Container(
[
dbc.Nav(
[
dbc.NavLink(
[html.I(className=“fas fa-home mr-2”), html.Span(“Home”)],
href="/",
active=“exact”,
),
dbc.NavLink(
[
html.I(id=‘place_where_loading_button_should_appear’),
html.Span(‘Page 1’),
],
href="/apps/pg_1",
active=“exact”,
),
],
vertical=True,
pills=True,
),
],
className=“sidebar”,
fluid=True
)
content = html.Div(id=“page-content”,
className=‘content’)
app.layout = html.Div([dcc.Location(id=“url”),
sidebar,
content])
@app.callback([Output(“page-content”, “children”),
Output(‘place_where_loading_button_should_appear’, ‘children’)],
[Input(“url”, “pathname”)])
def render_page_content(pathname):
if pathname == “/”:
return home.layout
elif pathname == “/apps/pg_1”:
return pg_1.layout, dcc.Loading(pg_1.layout)
The way my code is right now, the entire pg_1 loads inside the sidebar. Can you help me, please?