Search results

Display spinner until list items are loaded in React ListView component

22 Oct 2021 / 2 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.

Copied to clipboard
    createSpinner({
        target: this.spinnerInstance
    });
    showSpinner(this.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.

Source
Preview
App.tsx
index.tsx
index.html
index.css
App.jsx
index.jsx
Copied to clipboard
Copied to clipboard
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';

export default class App extends React.Component<{}, {}> {
  //bind the DataManager instance to dataSource property
  private data = new DataManager({
    url: "//js.syncfusion.com/ejServices/Wcf/Northwind.svc/",
    crossDomain: true
  });

  //map the appropriate columns to fields property
  private fields = { id: "ProductID", text: "ProductName" };
  spinnerInstance: HTMLElement | null = null;

  //bind the Query instance to query property
  private query = new Query()
    .from("Products")
    .select("ProductID,ProductName")
    .take(10);

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

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

  render() {
    return (
      <div>
        <ListViewComponent
          id="list"
          dataSource={this.data}
          fields={this.fields}
          query={this.query}
          showHeader={true}
          headerTitle="Product Name"
          actionComplete={this.onActionComplete.bind(this)}
        />
        <div
          ref={spinner => {
            this.spinnerInstance = spinner;
          }}
          id="spinner"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>
Copied to clipboard
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
Copied to clipboard
Copied to clipboard
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';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        //bind the DataManager instance to dataSource property
        this.data = new DataManager({
            url: "//js.syncfusion.com/ejServices/Wcf/Northwind.svc/",
            crossDomain: true
        });
        //map the appropriate columns to fields property
        this.fields = { id: "ProductID", text: "ProductName" };
        this.spinnerInstance = null;
        //bind the Query instance to query property
        this.query = new Query()
            .from("Products")
            .select("ProductID,ProductName")
            .take(10);
    }
    componentDidMount() {
        if (this.spinnerInstance) {
            createSpinner({
                target: this.spinnerInstance
            });
            showSpinner(this.spinnerInstance);
        }
    }
    onActionComplete() {
        if (this.spinnerInstance)
            this.spinnerInstance.style.display = "none";
    }
    render() {
        return (<div>
        <ListViewComponent id="list" dataSource={this.data} fields={this.fields} query={this.query} showHeader={true} headerTitle="Product Name" actionComplete={this.onActionComplete.bind(this)}/>
        <div ref={spinner => {
            this.spinnerInstance = spinner;
        }} id="spinner"/>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));