Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

How to implement a loading component to a dropdown menu

Hello,

I have an Index app with a drop down menu.
Once one of the options has been selected the new layout will be loaded.
Now I would like to add the dash loading component which will be activated once something is selected from the dropdown.
Could someone give me a hint how to implement it? I tried some variations but it failed entirely.
Thank you!

import dash
from dash import dcc
from dash import html
import dash_daq as daq
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
from app import app
from apps import x, y

app = dash.Dash(__name__, suppress_callback_exceptions=True)


app.layout = html.Div([


    html.Div([ html.Div('')
    
         ],  id='container'),

    html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[

            {'label': 'x', 'value': '37'},
            {'label': 'y', 'value': '38'},
        ],
        value='0',
    ),
    ],id='dropdown_div', style= {'display': 'block'}),

    ])


@app.callback(

    Output('container', 'children'),
    Output('dropdown_div', 'style'),
    Input('dropdown', 'value')
)

def track_dropdown(value):

    if value == '37':
        
        return x.layout, {'display': 'none'}

    if value == '38':
        
        return y.layout, {'display': 'none'}

    else:
        return dash.no_update, {'display': 'block'}


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