Showing the loading overlay

You can display either a message about the data loading (or an empty grid) or add a Svelte component to be applied to load data on a user's action (for example, load data on the button click).

Showing a message

To display a text message about the data loading process or notify about an empty grid, add the text as the value of the overlay property.

Example:

<script>
    import { Grid } from "@wx/svelte-grid";
    import { getData } from "./common/data";

    const { columns, data } = getData();
    
</script>

<Grid {data} {columns} overlay={'Loading...'} />

Adding a component

To add a component as an overlay, import the component to the application page, and add the component name as the value of the overlay property. Only a Svelte component can be applied as an overlay.

In the example below we import the Overlay component which is a button and apply the showData function to close the button overlay and show data on the button click.

<script>
    import { Grid } from "@wx/svelte-grid";
    import Overlay from "./stubs/Overlay.svelte";
    import { getData } from "./common/data";

    const { columns, data } = getData();

    let showOverlay = true;

    function showData({ detail }) {
        const show = detail.show;

        if (show) showOverlay = false;
    }
</script>
 
 <Grid 
  {data} 
  {columns} 
  overlay={showOverlay ? Overlay : null}
  on:overlay-button-click={showData} />

The Overlay component example:

<script>
    import { createEventDispatcher } from "svelte";

    import { Button } from "@xbs/svelte-wx";

    const dispatch = createEventDispatcher();

    function showData() {
        dispatch("action", {
            action: "overlay-button-click",
            data: {
                show: true,
            },
        });
    }
</script>

<Button type="primary" click={showData}>Show data</Button>