Vue LoadPanel - Show on Page Load

To display a LoadPanel on page load, initialize the component with visible set to true. You can hide the LoadPanel once your page or data finishes loading. The following code snippet demonstrates how to hide the component after ODataStore finishes loading data:

jQuery
index.js
$(() => {
    const data = new DevExpress.data.ODataStore({
        url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
    });

    const loadPanel = $('#loadpanel').dxLoadPanel({
        shadingColor: 'rgba(0,0,0,0.4)',
        visible: true,
    }).dxLoadPanel('instance');

    data.load().then(() => {
        loadPanel.hide();
    })
});
Angular
app.component.html
app.component.ts
<dx-load-panel
    shadingColor="rgba(0,0,0,0.4)"
    [visible]="loadingVisible"
></dx-load-panel>
import { DxLoadPanelModule } from 'devextreme-angular';
import ODataStore from "devextreme/data/odata/store";

export class AppComponent {
    loadingVisible: boolean = true;

    data: ODataStore = new ODataStore({
        url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
    });

    constructor() {    
        this.data.load().then(() => {
            this.loadingVisible = false;
        });
    }
}
Vue
App.vue
<template>
    <DxLoadPanel
        :visible="loadingVisible"
        shading-color="rgba(0,0,0,0.4)"
    />
</template>

<script setup lang="ts">
import { DxLoadPanel } from 'devextreme-vue/load-panel';
import ODataStore from 'devextreme/data/odata/store';

const loadingVisible = ref(true);

const data: ODataStore = new ODataStore({
    url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
});

data.load().then(() => {
    loadingVisible.value = false;
});
</script>
React
App.tsx
import { LoadPanel } from 'devextreme-react/load-panel';
import ODataStore from 'devextreme/data/odata/store';

export default function App () {
    const [loadingVisible, setLoadingVisible] = useState(true);

    const data: ODataStore = new ODataStore({
        url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
    });

    data.load().then(() => {
        setLoadingVisible(false);
    });

    return (
        <LoadPanel
            shadingColor="rgba(0,0,0,0.4)"
            visible={loadingVisible}
        />
    )
}
NOTE
The default placement of LoadPanel is over the entire application window. To place the component over a specific area, define the position property.