ResizeObserver loop limit exceeded

Questions
, ,
2

I pushed your full request to chatGPT, hope he is telling you not a story about purple unicorns… :slight_smile:

GPT:
The error message “ResizeObserver loop limit exceeded” occurs when the ResizeObserver API detects an infinite loop in its observation. This happens when a resize event triggers a change in the size of the element being observed, which then triggers another resize event, and so on. The browser has a limit to the number of times this can occur, which is typically around 10-15 times, after which the error is thrown.

In your code, the onCanvasResized function is being called every time the canvas is resized, which can trigger the ResizeObserver loop limit exceeded error if the function contains code that modifies the size of the canvas or triggers a resize event.

To solve this issue, you can try debouncing the onCanvasResized function, which means that the function will only be called after a certain period of time has elapsed since the last resize event. This can be achieved using a library like Lodash, which provides a debounce function that can be used to wrap the onCanvasResized function. For example:

kotlinCopy code

import { debounce } from 'lodash';

// ...

this.canvasResizedObserver = engine.onResizeObservable.add(
  debounce(this.onCanvasResized, 500)
);

In the above code, the onCanvasResized function will be debounced by 500 milliseconds, which means that it will only be called once every 500 milliseconds even if multiple resize events are triggered during that time.

Alternatively, you can also try using the one method instead of the add method when subscribing to the onResizeObservable. The one method ensures that the callback is only executed once and then automatically unsubscribes from the observable. For example:

kotlinCopy code

this.canvasResizedObserver = engine.onResizeObservable.one(this.onCanvasResized);

This approach is useful if you only need to execute the callback function once after the canvas is resized.