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.
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'));
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'));
#list {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
<!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>