Component similar to Loader

[Roh-codeur]

Hi

Thanks for putting this together and your help earlier with Loader. May I request for a loader component similar to the below. The one you helped with earlier, seems to work with a Button. I now have a requirement to show loader when, say, the page/tab loads. One option is to use Skeleton, however, I feel Loader looks better

https://dash.plotly.com/dash-core-components/loading

please do let me know if there is a way to achieve this and sorry if I missed anything

Thanks

[snehilvj]

Hi @Roh-codeur, based on the issue you had created previously (#40), I added LoadingOverlay as the dmc counterpart for dcc.Loading. Is this not what you are looking for?

[Roh-codeur]

@snehilvj
No, that's perfect mate. it works when I click on a Button. However, the dash core Loader also allows me to add a Loader to components and show a Loader, on say, page load. Unless I miss something (and I am sorry if I did), the LoadingOverlay does not allow me to do that. it only shows a Loader in response to a wait after a user action.

Say, I have a container which loads data table on page load.

1. How do I show a Loader on page load?
2. Also, does the Loading Overlay support any other control, apart from a Button?

Sorry, if I misunderstood how the control should be used. I am still learning and this library is a great help

Thanks!

[snehilvj]

LoadingOverlay does allow you to have loading indication on page load. For example have a look at this:

import time

import dash
import pandas as pd
from dash import Input, Output, dash_table, dcc, html

import dash_mantine_components as dmc

app = dash.Dash(__name__)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")


app.layout = html.Div(
    [
        dcc.Location(id="url", refresh=False),
        dmc.LoadingOverlay(id="page-content", style={"height": 300}),
    ]
)


@app.callback(Output("page-content", "children"), Input("url", "pathname"))
def display_page(pathname):
    time.sleep(3)
    return dash_table.DataTable(
        df.to_dict("records"), [{"name": i, "id": i} for i in df.columns]
    )


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

[Roh-codeur]

ahh, thanks buddy! I see what you have done. super!