how to make loading sign appears when someone clicked on a button (upload image) or (Upload file)

Ask the community
,
1

like>>(if (button#) clicked show (strip#)

*its not necessary to be a strip anything else shows that there’s loading
*and do i need a dynamic page to do this?

thank you

2

I have my own website and i want to increase page loading speed of my website can anyone help me to solve this issue?

3

You don’t need to have a loader per say and certainly not a dynamic page. There are a couple of ways you could accomplish this. If you are using an upload button to accomplish the uploading, you can do the following onChange:

export function uploadButton_change(event) {
 //Add your code for this event here: 
 
  if($w("#uploadButton").value.length > 0) {
 
    $w('#uploadButton').buttonLabel = "Uploading...";
    $w("#uploadButton").startUpload()
      .then( (uploadedFile) => {
        $w('#uploadButton').buttonLabel = "Uploaded!";

        let url = uploadedFile.url;
        console.log(url)

      })
      .catch( (uploadError) => {
        console.log(`Error: ${uploadError.errorCode}`);
        console.log(uploadError.errorDescription);

      });
    } 
}

The above will change the label of the button to “Uploading…” then “Uploaded!” once the file has successfully been uploaded.

You could also create a loader by formatting a container box element to your liking and do the following:

export function uploadButton_change(event) {
 //Add your code for this event here: 
    
    if($w("#uploadButton").value.length > 0) {
 
    $w('#box').show()
    $w("#uploadButton").startUpload()
      .then( (uploadedFile) => {
        $w('#box').hide() //hide the loader once the image has been uploaded

        let url = uploadedFile.url;
        console.log(url)

      })
      .catch( (uploadError) => {
        console.log(`Error: ${uploadError.errorCode}`);
        console.log(uploadError.errorDescription);

      });
    } 
}