1

I am trying to show a ngx-bootstrap progress bar while my app is loading data from a csv file.

The Problem: The ui is frozen until the whole operation is over

I used setTimeout to split the loading and called it recursively. I also tried to call ngZone.run() and applicationRef.tick() and changeDetectorRef.markForCheck() ... without any success the progress bar only shows up full at the end of the operation.

I made a simpler stackblitz so you guys can show me how I can implement this. it's much simpler bcs in my code I put it in a service and I get the results through an observable. but if this works at least I would know what I'm doing wrong. https://stackblitz.com/edit/angular-gzdylf

zen gatsu
  • 13
  • 2
  • btw I already tried what's here https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular and searched a lot before posting this but I'm just frustrated and I don't want to do this on the back-end. – zen gatsu Mar 30 '18 at 00:12
  • 1
    Please, update your example with actual code for 'long operation'. The actual solution depends on it. The thing you're currently doing is basically infinite loop, and the solution is to not do that. – Estus Flask Mar 30 '18 at 00:15
  • @estus it's not an infinite loop though, can u suggest a way to simulate an intensive operation ? anyways my problem was that I call the function immediately in setTimeout as Sky_cardinal pointed out. Thank you for your help – zen gatsu Mar 30 '18 at 00:28
  • Usually finite loop is used for that, `for` does the job. Yes, the answer points at the problem. There are two ways to achieve better responsiveness during intensive operations, basically either web workers or chunked processing. The answers here cover both, https://stackoverflow.com/questions/49158605/deleting-object-keys-and-reassign-different-keys-is-good-approach-on-iteration-o – Estus Flask Mar 30 '18 at 00:38
  • @estus thank you, I will bookmark this, since I went to re-implement this with webworkers later. – zen gatsu Mar 30 '18 at 00:42

1 Answers1

3

In your example where you are using setTimeout to split up the work you are doing this:

setTimeout(work());

This means you are invoking the work function inside the loop instead of scheduling it to run later.

You need to change it to pass the function reference to setTimeout to get it to work as expected:

setTimeout(work);   // NOTE: `work` and not `work()`
Sly_cardinal
  • 12,270
  • 5
  • 49
  • 50
  • I want to cry, I should have read more about setTimeout before I go and try to find what's wrong with the change detector :( Thank you a lot :) – zen gatsu Mar 30 '18 at 00:29