Display spinner until list items are loaded

4 Mar 20253 minutes to read

The features of the ListView control such as remote data-binding take more time to fetch data from corresponding dataSource/remote URL. In this case, you can use EJ2
Spinner to enhance the appearance of the UI. This section explains how to load a spinner control to groom the appearance.

Refer to the following code sample to render the spinner control.

    ej.popups.createSpinner({
        target: document.getElementById('spinner')
    });
    ej.popups.showSpinner(document.getElementById('spinner'));

Refer to the following code sample to render the ListView control.

CSHTML

<ejs-listview enable="true" id="remotelist" headerTitle="Products" showHeader="true" query="new ej.data.Query().from('Products').select('ProductID,ProductName').take(10)">
    <e-data-manager url="//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/" crossDomain="true">
    </e-data-manager>
    <e-listview-fieldsettings id="ProductID" text="ProductName">
    </e-listview-fieldsettings>
</ejs-listview>

Here, the data is fetched from Northwind Service URL; it takes a few seconds to load the data. To enhance the UI, the spinner control has been rendered initially. After the data is loaded from remote URL, the spinner control will be hidden in ListView actionComplete event.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;

<ejs-listview enable="true" id="remotelist" headerTitle="Products" showHeader="true" query="new ej.data.Query().from('Products').select('ProductID,ProductName').take(10)">
    <e-data-manager url="//js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/" crossDomain="true">
    </e-data-manager>
    <e-listview-fieldsettings id="ProductID" text="ProductName">
    </e-listview-fieldsettings>
</ejs-listview>

<style>
    #element {
        display: block;
        max-width: 350px;
        min-height: 200px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>
<script>
    function oncomplete() {
        document.getElementById('spinner').style.display = "none";
    }
    function onBegin() {
        var ele = document.createElement('div');
        ele.id = 'spinner';
        document.getElementById('element').appendChild(ele);
        ej.popups.createSpinner({
            target: document.getElementById('spinner')
        });
        ej.popups.showSpinner(document.getElementById('spinner'));
    }
</script>

List.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult list()
        {   
            return View();
        }       
    }
}