Skip to content

Web-performance

UX patterns

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:

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. You can 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.