Preventing flickering when updating UI elements with AngularJS

A website I created showcases a variety of progress bars, each representing the progress of various backend tasks.

For example:

<div ng-repeat="job in jobs">
  <div id="progressbar">...</div>
</div>

I am using a $resource for the list of jobs and an Angular controller that continuously checks this resource for any updates. However, every time it updates the jobs list, the progress bars on the front end tend to flicker. Here's how the job list from the backend looks like:

[
  {"name": "job1", "completion": 0.6},
  {"name": "job2", "completion": 0.7}
]

Is there a way in Angular to prevent this flickering issue? Or do I need to approach this problem differently? I want to update the completion percentages while also adding new jobs that have started on the backend to the list.

Answer №1

There is no need for polling when using Angular. Your progressbar directives should automatically update based on the value of job.completion without any additional effort.

If you are experiencing flickering, it could be due to unnecessary polling that conflicts with Angular's $digest cycle.

When making async calls outside of the digest cycle, consider using _.throttle() from underscore to limit how often these calls are made.

Updating progress bars should not be resource-intensive, especially if using CSS animations instead of JavaScript.

To troubleshoot further, sharing your CSS and relevant directive code would be beneficial in pinpointing the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Addressing the issue of Google Charts legends overlapping

As a newcomer to Stackoverflow and Google Charts, I am encountering an issue in one of my projects that utilizes the Google Charts API. Specifically, I am trying to display two legends on the chart but they are overlapping in the preview. Despite explorin ...

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

Retrieve database SQL information using JavaScript to display data

I'm struggling to push the value from a textbox to SQL and display it. Despite reading numerous topics, I still can't figure it out. My explanation skills are lacking, but hopefully you can understand what I'm trying to achieve, especially i ...

Having several contact forms embedded within a single webpage

I am currently in the process of developing a prototype website and my objective is to have multiple forms on a single page. My goal is to have a form for each service, where users can click on the service and fill out a form to request a quote. The first ...

The ng-controller is not functioning properly even when being correctly invoked

I tried out some simple angularjs code, utilizing nodejs, angularjs, and html. Here are my files: https://github.com/internial/test. I decided not to include the node_modules folder as it was too large. On localhost:8080, this is the result: {{1 + 64}} ...

The equivalent of e.preventDefault() in Java (for Android) is to replace the typed text

I am working on a jQuery/JavaScript function that will replace any text typed in an input field with a specific text. Here is the code snippet: $('input').on('keydown', function(e){ e.preventDefault(); count++; if (count == ...

Data object constructor is not triggered during JSON parsing

Currently, I am retrieving data from a server and then parsing it into TypeScript classes. To incorporate inheritance in my classes, each class must be capable of reporting its type. Let me explain the process: Starting with the base class import { PageE ...

Isolating Express.js Requests for Enhanced Security

In my Node.js Express app, multiple users send requests to the server for various actions such as earning points, changing email addresses, and interacting with other users. My server code utilizes several setTimeouts, leading me to question whether diffe ...

Problem with jQuery's .prepend method being called twice on list items

Looking to enhance the appearance of a list by adding some icons before the anchor links within each list item. <ul class="submenu-children"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ...

Encountering an Ajax Issue with Laravel 5.4

I encountered the following error: "{"status":"error","msg":"Category was not created"}" Below is my Controller Function where I execute the action : function create_category(Request $request){ if($request->ajax()){ $c ...

How to Efficiently Remove Array Elements by Index in Typescript

What is the best way to remove an item by its index using Typescript? For example: let myArray = ['apple', 'banana', 'cherry', 'date']; // How can I delete the item at index 2? ...

Ajax is known for inundating servers with requests at a rapid rate, causing a significant

I am running an application that sends multiple requests per second to fetch data from API and return responses to clients. The process flow is as follows: Ajax sends a request View sends a request API returns response for view View returns response for ...

Key in the calculation on Keypup for multiple rows, one row at a time

I want to create a calculation function for a form with multiple rows. The goal is to determine the totals for each row by multiplying the cost and unit price, then inputting the result in the total field. Below is the script that I attempted: <scrip ...

ngPattern problem

As I work on creating a more user-friendly expiration date input for a credit card checkout form, I encountered a challenge. The goal is to automatically insert a " / " between the expiration month and year as the user types. However, the issue arises when ...

Why do some button clicks not trigger a page refresh in JavaScript?

Hey there, I have a situation where I have two buttons - one to add a dog to the dog list and another to clear the entire list. Both buttons are functioning properly, but I'm having an issue with only the OnSubmit button refreshing the page. The dog ...

Issue with the _.filter function in lodash library when used in a Node.js environment

My goal is to remove rows from a CSV file that already contain email addresses found in Mailchimp. Although I attempted to achieve this with a function, it seems that the number of elements returned is not accurate: async function testDeleteEmails(listID, ...

Retrieve the values from hidden input fields that share the same name

How do I retrieve values from cName inputs? <form method="post" action=""> <input type="hidden" name="cName" value="test1" /> <input type="submit" name="get" /> </form> <form method="post" action=""> <input type="hi ...

Sending a batch of items through an ajax request

I am faced with a challenge where I have a collection of data stored within multiple objects. Within each object, there is an ID and a status, while the main object contains a type and form id. The issue arises when trying to post the result via ajax as ...

What is the purpose of using an open quote and bracket in the `eval('('+jsonString+')')` syntax for parsing a JSON string?

What is the rationale behind this particular syntax structure? eval('(' + jsonString+ ')') When it comes to parsing JSON text, Crockford explains that "The text must be wrapped in parentheses to prevent any confusion with JavaScript& ...

Angular makes it easy to perform HTTP requests using the `http

Greetings! Here is the JSON data for "names" : [ { "file": "file1.zip", "date": "12-03-2016", }, { "file": "file2.zip", "date": "24-06-2016", }, { "file": "file3.zip", "date": "02-12-2016 ...