Show/hide a spinner with spin.js

Introduction

This article introduces how to set up a spinner in kintone, using the spin.js library in the kintone CDN.

The spin.js library

spin.js is a library that displays a spinner, commonly used as a loading icon. This library does not require any CSS libraries, and is not jQuery dependent.

Use-case for spin.js

In a common kintone use-case, we can display the spinner in the middle of the window when a large volume of data is being processed with REST API, and stop displaying it when the process completes.


In this article, we will apply it to the sample code in the "Calculate and display total record counts" article. This sample counts the number of records in an App with field values that match a condition. If the total number of records is larger than 100, the number of API calls needed will also increase, thus increasing the time taken for the process to finish, and displaying the final number. Here, we can use spin.js to show a spinner so that the user knows the process is running when a large volume of data needs to be processed.

Showing and hiding the spinner

spin.js is used by specifying an element where the spinner will show and hide.

In our code, we will first prepare functions to show and hide the spinner.
Once you declare the functions, you can use showSpinner() and hideSpinner() to show and hide the spinner. Specify the style inside these functions so you can make the most of the original features of spin.js.

jQuery will be used in this example to generate the DOM for the spinner.

JavaScript source code (countRecords.js)

The full source code, that includes the sample from the "Calculate and display total record counts" article is as below.

 

Uploading the scripts

Specify the URLs of spin.js and jQuery that are in the kintone CDN. Also upload the countRecords.js source code. Make sure that the URLs and files are displayed in the following order.

US_1.PNG

Testing the customization

When the record list page loads, the spinner will display when the REST API call is made and while the call is processing.

US_2.PNG

 

The spinner will stop displaying when the REST API call finishes processing, and the number of records "In progress" will be displayed.

US_3.PNG

 

The key point is to run showSpinner() before the REST API call, and to run hideSpinner() after the completion of API process (within the callback).

Finally

REST APIs for simple processes like the example above should finish processing very quickly. For longer processes though, we don't want users to interrupt the process by clicking on links within the browser. Displaying the spinner is an intuitive method for notifying the user that a process is taking place, and that they should wait for the process to finish.

 

Was this article helpful?
0 out of 0 found this helpful
Comments
Please sign in to leave a comment.