Refactor the client side code to minimise the DOM manipulation

[Rupeshiya]

Before you describe your issue, idea or feature, please consider using this issue template.

Refactor the client side code to minimise the DOM manipulation

Type of issue:

• Bug / Error
• Idea / Feature
• Improvement detail

Short description on the issue

Refactor the client-side code to minimize the DOM manipulation, because Angular can’t keep track of items in the collection and has no knowledge of which items have been removed or added.
As a result, Angular needs to remove all the DOM elements that associated with the data and create them again.
That means a lot of DOM manipulations especially in a case of a big collection, and as we know, DOM manipulations are expensive.

Possible fix

Track the changes and update the DOM instead of re-creating again.

[Rupeshiya]

@psnmissaka @tharindupr Please review the issue and let me know your thoughts.