Google Lighthouse failing with NO_LCP error

originally i've posted this here but who cares?

Ok babies, so you've all googled REAL HARD, and all they told you was "clean your cache/go incognito mode". Thanks a lot, dude from medium.com - that was quite an insight, didn't help me, unfortunately.

You just keep staring into:

Largest Contentful Paint
Error!
Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)

scratching your head and thinking what else could have gone wrong. I'll give you a new fresh lead to check!

Run lighthouse cli against your page (its available as a docker container too, so there's no excuse no to try it). If today is your lucky day, you'll see some text, looking suspiciously RED there:

Whoopsy-poopsy, my friend! As of today, there's a still an open bug in chromium that i have stumbled upon in lighthouse github issues

Animating opacity from 0 to 1, as well as animating things off-screen - might cause chrome thinking that the "Largest contentful paint" will never happen, and quit the lighthouse check.

Unlike FIRST contentful paint - there's no config to offset it. maxWaitForFcp - exists, maxWaitForLcp - doesnt. You can play with non-zero values for pauseAfterFcpMs, networkQuietThresholdMs, pauseAfterLoadMs, cpuQuietThresholdMs - all of which did not help me.

What i did next, was searching for opacity: 0 and transition in our sass files - dropping those did not help either.

The culprit was in the in-house design library we used, that had a nifty class for react-like skeleton-animations.

background-size: 400%, 100%;
animation: xxxx 6s linear infinite;

@keyframes xxxx {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

One find-replace of all mentions of this class with "", and one rebuild later - i had my metric displayed as it should.

Send virtual beers if that was it, i'll accept them all.