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, the spinner can be displayed 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.
This article will apply a spinner 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, spin.js can be used 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 the code, first prepare the functions to show and hide the spinner.
Once the functions are declared, showSpinner() and hideSpinner() can be used to show and hide the spinner. Specify the style inside these functions.
jQuery will be used in this example to generate the DOM for the spinner.
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.
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.
The spinner will stop displaying when the REST API call finishes processing, and the number of records In progress will be displayed.
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).
REST APIs for simple processes like the example above should finish processing very quickly. For longer processes though, users shouldn't 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.