dcc.Loading - Choose location of loading animation?

Dash Python
1

With some community forum help, yesterday I was able to get some loading animations to work properly.

Now my question is: Is there a way to decide where the loading animation is placed on the web page?

Using the example from the Loading Component page, I was able to come up with an alternative that works, but I think there is probably a better way.

# -*- coding: utf-8 -*-
import dash
import dash_html_components as html
import dash_core_components as dcc
import time

from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.scripts.config.serve_locally = True

app.layout = html.Div(
    children=[
        html.H3("Edit text input to see loading state"),
        dcc.Input(id="input-1", value='Input triggers local spinner'),
        html.Div(id='output-1'),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        dcc.Loading(id="loading-1", children=[html.Div(id="loading-output-1")], type="default"),
        html.Div(
            [
                dcc.Input(id="input-2", value='Input triggers nested spinner'),
                dcc.Loading(
                    id="loading-2",
                    children=[html.Div([html.Div(id="loading-output-2")])],
                    type="circle",
                )
            ]
        ),
    ],
)

@app.callback([Output("output-1", "children"), Output("loading-output-1", "children")], [Input("input-1", "value")])
def input_triggers_spinner(value):
    time.sleep(2)
    return value, ''


@app.callback(Output("loading-output-2", "children"), [Input("input-2", "value")])
def input_triggers_nested(value):
    time.sleep(2)
    return value


if __name__ == "__main__":
    app.run_server(debug=False)

To be clear, this is just an example and I have no intention of inserting a bunch of html.Br() statements into my code. What I do want to confirm is the following snippet:

@app.callback([Output("output-1", "children"), Output("loading-output-1", "children")], [Input("input-1", "value")])
def input_triggers_spinner(value):
    time.sleep(2)
    return value, ''

The output is now populating a standalone html.Div object, and it is returning empty (’’) for ‘loading-output-1’ so that the loading animation displays properly, but doesn’t actually return anything. This way, I can control the location of the loading animation, and place seemingly any number of objects between the the data being loaded and the loading animation.

2

Hello, did you solve the problem?