Power Apps Button Animation

A few days ago, I was guiding one of my clients on how to save form data locally in Power Apps using collections. For saving data, I used the Collect() function instead of the Patch() function. There, we face an issue: when the submit button is clicked more than once, duplicate data is stored in the collection.

It’s because the client hasn’t figured out whether the data is being saved or not, so they were clicking the button multiple times. To avoid this issue, I researched and found how to animate the save button while submitting and prevent users from clicking while the submission is in progress.

You can see the screenshot for reference.

PowerApps display a loading button until the data is saved

I will explain how to animate the Power Apps modern button control in this article.

Create a Loading Animation in Power Apps Modern Button Control

Before creating a loading animation in the button control, I would like to mention that there are alternative solutions to the above mentioned problem.

Reset the controls after submitting data.
Make the submit button disabled while submitting.
Display a notification that the data is being saved.

However, as end users, they will understand things better when we show images or animations instead of just data or messages every time.

Let’s see the steps to create animated buttons in Power Apps now!

To get the modern controls in Power Apps, open Settings, go to Updates, and then enable Modern controls and themes.

loading animation on power apps button controls

Add a modern button control, then provide a name for the button in the Text property, and select an icon.

Creating a Loading Animation in Power Apps

Create a collection of the App OnStart property to store the details in the app itself.

ClearCollect(
    colProjectDetails,
    {
        ProjectName: "",
        ProjectID: "",
        TaskTitle: "",
        ClientName:"",
        AssignedDate:""
    }
)

Add the text input and date picker controls, as shown below, and then provide the code below in the OnSelect property of the submit button.

UpdateContext({varSaving:true});
Collect(
    colProjectDetails,
    {
       ProjectName:txt_projectName.Text,
       ProjectID:txt_ProjectID.Text,
       TaskTitle:txt_tasktitle.Text,
       ClientName:txt_clientname.Text,
       AssignedDate:Text(dtp_Assignedto.SelectedDate)
    }
);
UpdateContext({varSaving:false})

Here, the varSaving variable value is assigned to true at the start and then, after collecting the information, is updated back to false. The Collect() function will save the data present in controls to the colProjectDetails.

powerapps loading animation button while saving data

Then, update the Icon and DisplayMode properties of the button control with the following code.

Icon:  If(varSaving, "ArrowSync", "Save")

DisplayMode:  If(varSaving,DisplayMode.Disabled,DisplayMode.Edit)

create a loading animation button in power apps

Add a Timer control and update the below values and formulas for the given properties.

OnTimerEnd:  UpdateContext({varRotationAngle:Mod(varRotationAngle +10,360)});

Start: varSaving

Repeat: true

Duration: 1

Y: -Self.Height

Visible: false

Here, the varRotationAngle variable value will be updated every time by 10 from the current value. When the varSaving value is true, then only the timer will start and update the varRotationAngle variable.

Provide the code below in the IconRotation property of the button control.

If(varSaving,varRotationAngle,0)

To rotate the icon, we use the varRotationAngle variable when the varSaving variable is true; otherwise, it is set to 0.

How to show a loading symbol when data is loaded in Power Apps

Save the changes and preview the app. While submitting data, the button will become disabled and the loading icon will appear until the data is saved.

This way, we can develop an animated button control in Power Apps!

In this article, I explain how to display an animated button control and prevent multiple clicks while submitting data in Power Apps. Follow this article if you are trying to implement an animated button like this! I hope you found this helpful article!

Also, you may like!