Displaying a spinner until list items are loaded in React ListView component

23 Jan 20258 minutes to read

Some features of the ListView component, such as remote data-binding, take more time to fetch data from corresponding dataSource/remote URL. In such cases, you can use the EJ2 Spinner to enhance the user interface. This section explains how to load a spinner component to improve the appearance.

Refer to the following code sample to render the spinner component:

    function createSpinner({
        target: spinnerInstance
    });
    function showSpinner(spinnerInstance);

In this example, the data is fetched from the Northwind Service URL; it takes a few seconds to load the data. To enhance the user experience, the spinner component is rendered initially. After the data is loaded from the remote URL, the spinner component will be hidden in the ListView’s actionComplete event.

index.jsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
//import DataManager related classes
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';
import './index.css';
function App() {
    React.useEffect(() => {
        componentDidMount();
    }, []);
    //bind the DataManager instance to dataSource property
    let data = new DataManager({
        url: "https://services.syncfusion.com/js/production/api/",
        crossDomain: true
    });
    //Map the appropriate columns to fields property
    let fields = { id: "EmployeeID", text: "FirstName" };
    let spinnerInstance = null;

    //Initialize query with the Query instance to get specified set of data
    let query = new Query()
        .from("ListView")
        .select("EmployeeID,FirstName")
        .take(10);
    function componentDidMount() {
        if (spinnerInstance) {
            createSpinner({
                target: spinnerInstance
            });
            showSpinner(spinnerInstance);
        }
    }
    function onActionComplete() {
        if (spinnerInstance)
            spinnerInstance.style.display = "none";
    }
    return (<div>
        <ListViewComponent id="list" dataSource={data} fields={fields} query={query} showHeader={true} headerTitle="Employees" actionComplete={onActionComplete.bind(this)} />
        <div ref={spinner => {
            spinnerInstance = spinner;
        }} id="spinner" />
    </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
//import DataManager related classes
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';

function App() {
  React.useEffect(() => {
    componentDidMount();
  }, [])

  //Bind the DataManager instance to dataSource property
  let data = new DataManager({
    url: "https://services.syncfusion.com/js/production/api/",
    crossDomain: true
  });

  //Map the appropriate columns to fields property
  let fields = { id: "EmployeeID", text: "FirstName" };
  let spinnerInstance: HTMLElement | null = null;

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

  function componentDidMount() {
    if (spinnerInstance) {
      createSpinner({
        target: spinnerInstance
      });
      showSpinner(spinnerInstance);
    }
  }

  function onActionComplete() {
    if (spinnerInstance) spinnerInstance.style.display = "none";
  }

  return (
    <div>
      <ListViewComponent
        id="list"
        dataSource={data}
        fields={fields}
        query={query}
        showHeader={true}
        headerTitle="Employees"
        actionComplete={onActionComplete.bind(this)}
      />
      <div
        ref={spinner => {
          spinnerInstance = spinner;
        }}
        id="spinner"
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.css

#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>