After adding new features to your product, check whether the loading time fits into the recommendations. Download speed can be checked with Speedcurve or tool from Google.

You can also read about the skeleton and spinner in the guides:

• Skeleton (it also describes loading heavy images)
• Spin

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.

TIP

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 pdf or png format – Non-SPA loading scheme and the SPA loading scheme. They are available only for Semrush developers.