Display spinner until list items are loaded in React Listview component

30 Jan 20236 minutes to read

The features of the ListView component 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 component to groom the appearance.

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

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

Here, the data is fetched from Northwind Service URL; it takes a few seconds to load the data. To enhance the UI, the spinner component has been rendered initially. After the data is loaded from remote URL, the spinner component will be hidden in ListView 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';
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, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { createSpinner, hideSpinner, 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'));