Question: window.requestAnimationFrame instead of afterRender

[snewcomer]

On "heavy" pages (images, lots of content), afterRender is still not early enough. An example may include getBoundingClientRect on an element that renders and image.

    // ember render modifiers
    didInsertNode(element, [instance]) {
        if (instance.lazyLoad) {
            window.requestAnimationFrame(() => {
                const { bottom } = element.getBoundingClientRect();
                const tolerance = bottom - window.innerHeight - element.offsetHeight - (50 * (1 + Math.random()));
                // margin for up/down and right/left scrolling
                const { onEnter } = instance.inViewport.watchElement(element, {
                    viewportTolerance: { top: 200, right: 200, bottom: Math.abs(tolerance), left: 200 }
                });

                onEnter(instance.didEnterViewport.bind(instance));
            });
        }
    },

requestAnimationFrame waits a tick until the frames have painted, thus allowing us to properly measure.

I'm not sure why afterRender doesn't take into account this case since it is supposed to run after the entire DOM tree has been painted, but my guess is it doesn't take into account async image fetches.

The next question is how/if we replace afterRender [link] with something else. And I think that mainly comes down to understanding the fundamental differences between the two. I'll do some research. If anybody has other thoughts, would love to hear them as well!