[BUG] ddk3.0.0rc2 dash4.0.0rc2 - dcc.loading - Label and input box sit very close to each other, visually cramped.

[sadafnajam]

Thank you so much for helping improve the quality of Dash!

We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.

Describe your context

• replace the result of pip list | grep dash below

dash-design-kit==3.0.0rc2
dash==4.0.0rc2
gunicorn==23.0.0
pandas>=1.1.5

Describe the bug

from dash import Dash, dcc, html, Input, Output, callback
import time

app = Dash()

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


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


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


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

Expected behavior

space between label and input

[AnnMarieW]

In this dash 4 demo, it looks like the Inputs are wrapped in a Label and use html.P instead of html.Div. This gives some space between the label and input box. I'm not sure it's related to the dcc.Loading component.

https://dcc-redesign.plotly.app/inputs