Challenge #1 of 2

Q: 

I just came back from a meeting with our designer, and she has an amazing concept for a new transition that we need to add to our page loads between clicks! It looks like this in the CSS main file:

body {
    background-color: #fff
    transition: background-color 0.2s;
}

body.turbo-loading {
    background-color: #f00;
}

I think this is going to look awesome (and won't render too many of our viewers blind)!

Our solution to implementing this using Turbo Drive event listeners is as follows:

document.addEventListener('turbo:visit', () => {
    document.body.classList.add('turbo-loading');
});

document.addEventListener('turbo:before-render', (event) => {
    event.detail.newBody.classList.add('turbo-loading');
});

document.addEventListener('turbo:render', () => {
   document.body.classList.remove('turbo-loading');
});

But upon peer-review, our coworker tells us that this is wrong! Our turbo:render callback is missing a requestAnimationFrame!

document.addEventListener('turbo:render', () => {
    requestAnimationFrame(() => {
       document.body.classList.remove('turbo-loading');
    });
});

Why do we need this?