Ways to show that a function is running and causing the DOM to refresh

Question

Ways to show that a function is running and causing the DOM to refresh

In my Angular application, I have a page that loads initially. When I click on the "Change" button, it triggers a function:

ng-click = "changeFunction()"

This function re-evaluates and updates the content of the page, especially in areas like {{textVariables}} and images.

If only a small portion of the page is changed, the transition is quick and seamless. However, if there are significant changes, the button appears to be pressed for an extended period, creating the illusion that something is broken (even though it's just taking time to update).

How can I modify my changeFunction() in the Angular controller to set a flag as true when the updating process begins, and then back to false once it's completed? This way, I can use the flag to indicate to the user that changes are being made.

Just looking for guidance on the JavaScript aspect of the code; I'll handle designing the UI elements separately.

javascript angularjs

Answer 1

Answer №1

Adding the following function should be quite simple:

updateStatus() {
  if (!this.addingNew) {
    this.addingNew = true;
  }

  // Insert your code here;

  // Finally, don't forget to reset the flag:
  this.addingNew = false;
}

After implementing this function, remember to verify the status using this.addingNew or vm.addingNew (if 'vm' is used in the template).

Answer 2

Adding the following function should be quite simple:

updateStatus() {
  if (!this.addingNew) {
    this.addingNew = true;
  }

  // Insert your code here;

  // Finally, don't forget to reset the flag:
  this.addingNew = false;
}

After implementing this function, remember to verify the status using this.addingNew or vm.addingNew (if 'vm' is used in the template).

Ways to show that a function is running and causing the DOM to refresh

Answer №1

Similar questions

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

The tubular.js Youtube video background is overlapping my other components on the site, instead of displaying behind them as intended

Gulp is throwing an error: SyntaxError - JSON input unexpectedly ended

The ng-View feature appears to be malfunctioning within AngularJS

When inside a function declaration, io.socket is not defined, but it is defined outside of

The form tag is failing to display the Name input field

How to Handle Jquery POST Data in Express Servers

Modify the h:outputText value dynamically with the power of jQuery!

Unexpected behavior encountered when using the $http.post method

"Learn the step-by-step process of retrieving the height and width of a user's

Implementing a login system on my website using HTML - a step-by-step guide

The page's layout becomes disrupted when the back end is activated, requiring some time to realign all controls

The non-disappearing nature of -webkit-appearance

What steps do I need to take to create events similar to jQuery?

The functionality of ng-model appears to be malfunctioning

The Material-ui DatePicker seems to be malfunctioning and as a result, the entire form is not

Sort by the date using a specific data attribute

How to Customize the Label Position of Material UI TextField

Having issues with populating Gridview using AJAX post method? Looking for a solution?

Extract information from a webpage using Selenium WebDriver