hi Filip,
its either your code or SAP code.. in order to find out, forget the SAP component in question and just perform your OData call + js operations - Case the browser freezes it's your code. Case not and when you finally assign your data to the viz component it should then hang, it's SAP code.. simple.
now, what happens and reason why the browser cannot "respond" is usually a continuous loop which takes a lot of time to be processed not allowing Chrome to repaint.
as per your example, let's say you have
var data =[
{"category":"A","value":1,"group":"x"},
{"category":"B","value":2,"group":"y"},
{"category":"C","value":3,"group":"x"},
{"category":"A","value":4,"group":"y"},
{"category":"A","value":5,"group":"x"}
];
and you want to filter when group === "x", but your data array is huge.. you have two ways of doing such.
1. OData returns the right data for your usage: - there is no real reason to have process in the browser, apart from what a lot of nut cases out there will say.. it's still a Client and processes should happen in the Server.. - in this method you have a Filter or something in OData to filter server-side and you won't need to loop your array and filter into a new array.
- TIP: when doing operations like this and case you aim for performance, you should never, ever use either $.map or arr.forEach or in many cases arr.map.. always prefer using a for loop with declaring the arr.length into a variable.. I understand the solution in the SO thread you highlight does not use this, while code may look "nicer" with a $.map it performs like ****.
2. Cannot avoid the loop: create a function to process your array receiving a "startIndex" and a "processedCount" variable - each time the total number of records you processed reaches the value of processedCount, you yeld using setTimeout(yourFunction(currentIndex, processedIndex){ ... }, 1); - this will leave roughly 1 ms for the browser to perform repaints and other operations and after it delegates the js thread back to your code.
Hope it helps,
Dan.