Display spinner for list item loading from remote data in EJ2 TypeScript ListView control

1 Mar 20256 minutes to read

Features of the ListView control, such as remote data binding, can take some time to fetch data from the corresponding dataSource/remote URL. In this scenario, you can use the EJ2 Spinner to enhance the appearance of the UI. This section explains how to load a spinner control to improve the user experience.

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

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

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

let listviewInstance: ListView = new ListView({
    //Bind the DataManager instance to the dataSource property
    dataSource: new DataManager({
        url: '//js.syncfusion.com/ejServices/Wcf/Northwind.svc/',
        crossDomain: true
    }),

    //Bind the Query instance to the query property
    query: new Query().from('Products').select('ProductID,ProductName').take(10),

    //Map the appropriate columns to the fields property
    fields: { id: 'ProductID', text: 'ProductName' },

    //Set the header tittle to the list
    headerTitle: 'Product Name',
    showHeader: true,
    width:"300",
    actionComplete  : oncomplete
});

//Render the initialized ListView
listviewInstance.appendTo("#element");

Here, the data is fetched from the 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 the remote URL, the spinner control will be hidden in the ListView actionComplete event.

import { ListView } from '@syncfusion/ej2-lists';
//Import DataManager related classes
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createSpinner, showSpinner } from '@syncfusion/ej2-popups';

//Initialize the ListView control
let listviewInstance: ListView = new ListView({
    //Bind the DataManager instance to dataSource property
    dataSource: new DataManager({
        url: 'https://services.syncfusion.com/js/production/api/',
        crossDomain: true
    }),

    //Initialize query with the Query instance to get specified set of data
    query: new Query().from('ListView').select('EmployeeID,FirstName').take(10),

    //Map the appropriate columns to fields property
    fields: { id: 'EmployeeID', text: 'FirstName' },

    //Set header title
    headerTitle: 'Employees',

    //Set true to show header title
    showHeader: true,
    width: "300",
    actionComplete: oncomplete
});

//Render the initialized ListView
listviewInstance.appendTo("#element");

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

function oncomplete() {
    const spinner = document.getElementById('spinner');
    if (spinner) {
        spinner.style.display = "none";
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id='element'>
            <div id="spinner"></div>
        </div>
    </div>
    <style>
        #element {
            display: block;
            max-width: 350px;
            min-height: 200px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 35%;
  left: 45%;
}