How to resolve zone.js violation message in angular bogging down UI?

Question

I have an angular 16 project. A component has material expansion panels that get paged and loads in the next set after an api response.

I'm getting the error form zone.js: [Violation] 'finish' handler took 166ms

The console points it to polyfiill.js. Looking at my files it's coming from the zone.js in the polyfill file.

The area it's pointing to is:

// global shared zoneAwareCallback to handle all event callback with capture = false
var globalZoneAwareCallback = function (event) {
  return globalCallback(this, event, false);
};

I don't know if it's an issue with zone.js, something I'm doing, etc. I tried doing this in my polyfills file based on other SO issues:

declare var require: any
if (!window['Zone']) {
  require('zone.js/dist/zone'); // Included with Angular CLI.
}

but it didn't seem to have any effect.

Answer 1

So, generally speaking, the finish related to a function that returned a value. I have quite a view boolean returns to check if things are loaded, should be checked, etc.

When I requested more data from the api, the new set of expansion panels were doing those checks. Thing is, it shouldn't be since I haven't requested for internal data for those panels. Turns out, there was residual data.

I cleared out my data for all related calls and they functions stopped being called.