Display spinner until list items are loaded in Vue ListView component

19 Feb 20255 minutes to read

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

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

    createSpinner({
        target: this.spinnerEle.nativeElement
    });
    showSpinner(this.spinnerEle.nativeElement);

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 is rendered initially. After the data is loaded from the remote URL, the spinner component will be hidden in the ListView’s actionComplete event.

<template>
  <div class="control-section">
    <div id="flat-list">
      <!-- ListView element -->
      <ejs-listview id='sample-list' :dataSource='data' :query='query' :fields='fields' :headerTitle='headerTitle'
        showHeader='true' :actionComplete='onComplete'></ejs-listview>
    </div>
    <div ref='spinnerEle' id="spinner"></div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createSpinner, showSpinner } from '@syncfusion/ej2-vue-popups';
import { ref, onMounted } from 'vue';

const spinnerEle = ref(null);
const data = new DataManager({
  url: 'https://services.syncfusion.com/js/production/api/',
  crossDomain: true
});
const query = new Query().from("ListView").select("EmployeeID,FirstName").take(10);
const fields = { id: "EmployeeID", text: "FirstName" };
const headerTitle = 'Employees';

onMounted(() => {
  createSpinner({ target: spinnerEle.value });
  showSpinner(spinnerEle.value);
});

const onComplete = () => {
  spinnerEle.value.style.display = "none";
};

</script>

<style>
#sample-list {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
     <div id="flat-list">
     <!-- ListView element -->
     <ejs-listview id='sample-list' :dataSource='data' :query='query' :fields='fields' :headerTitle='headerTitle' showHeader='true' :actionComplete='onComplete'></ejs-listview>
     </div>
     <div ref='spinnerEle' id="spinner" ></div>
   </div>
 </template>
 <style>
 #sample-list {
     border: 1px solid #dddddd;
     border-radius: 3px;
     margin: auto;
 }
 #flat-list {
     width: 50%;
     padding: 10px;
     margin: auto;
 }
 </style>
 <script>
 
 import { ListViewComponent } from "@syncfusion/ej2-vue-lists";
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { createSpinner, showSpinner } from '@syncfusion/ej2-vue-popups';
 
 
 export default {
 name: "App",
 components: {
 "ejs-listview":ListViewComponent 
 },
 
   data: function() {
     return {
       data: new DataManager({
         url: 'https://services.syncfusion.com/js/production/api/',
         crossDomain: true
       }),
       query: new Query().from("ListView").select("EmployeeID,FirstName").take(10),
       fields:  { id: "EmployeeID", text: "FirstName" },
       headerTitle: 'Employees',
     };
   },
   mounted: function(){
      createSpinner({ target: this.$refs.spinnerEle });
     showSpinner(this.$refs.spinnerEle);
   },
   methods: {
     onComplete: function(){
       this.$refs.spinnerEle.style.display = "none";
     }
   }
 }
 </script>