Loading class that is the _parent_ of the app container

[chriddyp]

Right now, the ._dash-loading-indicator class is a cousin of the app container. If it was the parent, then you could customize UI in your app.layout that would only appear while a callback is being executed:

app.layout = html.Div(className='display-on-loading', children='Loading')

.display-on-loading {
    display: none;   
}
._dash-loading-indicator  .display-on-loading {
    display: block;
}

[chriddyp]

For example, here's some CSS that could display a universe "loading" message at the top of the page:

.saving-indicator {
    width: 80px;
    background-color: #F50091;
    color: rgb(50, 50, 50);
    padding: 5px 5px 10px 10px;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    left: calc(50% - 40px);
    z-index: 1;
    text-align: center;
    display: none;
}

._dash-loading-callback-parent .saving-indicator {
    display: block;
}

[alexcjohnson]

I'm assuming this is closed by the loading states API #93 https://community.plot.ly/t/loading-states-and-loading-component/19650 - if there's anything still relevant here please reopen in the dash repo.