You can also read about the skeleton and spinner in the guides:
Animation of the appearance and disappearance of the skeleton and spinner –
ease-out 0.3. The exception is the first spinner that launches the product – it doesn't have animation, because the
@semcore components haven't loaded yet.
Why is the animation time chosen this way? This is a recommendation that is related to users' perception of time when working with interfaces. Read more about this, for example, in the article from Smashing Magazine – Why Perceived Performance Matters, Part 1: The Perception Of Time.
Schemes with a detailed loading process are available in the inner Figma file and Miro board. From Figma, the scheme can be exported to
png format – Non-SPA loading scheme and the SPA loading scheme. They are available only for Semrush developers.