Implementing a Progress Button with API fetch data

2 mins read

Overview

In web applications, providing visual feedback to users during long-running operations is essential for enhancing user experience. The Syncfusion ProgressButton component is a versatile tool that can be used to indicate the progress of such operations. This article will guide you through the process of implementing a ProgressButton that relies on loading time, complete with a spinner that deactivates upon completion.

Implementing the ProgressButton

To create a ProgressButton with a loading duration, you need to set the duration property in the HTML markup. This property determines how long the loading spinner will be displayed on the button.

Add ProgressButton component

<button #contractBtn ejs-progressbutton 
    content="Upload" 
    duration="30000" 
    (begin)="contractBegin()">
</button>

In the above code snippet, the duration is set to 30000 milliseconds (or 30 seconds), which means the spinner will be active for that amount of time.

Implement begin event

After the loading time has ended, it is advisable to disable the spinner. This can be accomplished by managing the begin event. The spinner will be concealed once the fetch API is finished, and in this case, the setTimeout function is utilized to hide the spinner and modify the button content after a specific duration.

public contractBegin(): void {
     this.contractBtn.content = 'Upload';
     // const url = ''; // Place the URL to fetch the data
     // fetch(url)
     // .then((response) => {
     // Place the code which is written inside the setTimeout method.
     // });
     
     setTimeout(() => {
          hideSpinner(this.contractBtn.element.querySelector(".e-spinner"));
          this.contractBtn.content = 'Success';
          this.contractBtn.refresh();
     }, 5000);
}

In the JavaScript function contractBegin, we use setTimeout to wait for 5 seconds before hiding the spinner and changing the button content to ‘Success’. The refresh method is called to update the button’s appearance.

Demo and Sample Code

To see the ProgressButton in action and to experiment with the code, you can visit the following demo sample link:

Demo Sample Link: Syncfusion ProgressButton Example

Conclusion

By following the steps outlined in this article, you can effectively implement a Progress Button in your web application using Syncfusion components. This not only enhances the user interface but also keeps users informed about the status of ongoing processes.

Additional References

Remember to refer to the official Syncfusion documentation for more detailed information and advanced configurations.

Did you find this information helpful?

Yes

Comments (0)