This feature improves the store's experience and perceived performanc…

[brendonguedes]

What is this contribution about?

This feature improves the store's experience and perceived performance through loading placeholders.

How to test it?

Skeletons are like an element's or section's wireframe. It's a placeholder that simulates the layout of these elements/sections while data is being loaded.

Instead of showing a blank page, displaying Skeletons while loading content makes the user feel like the store is more responsive and faster.

Extra info

Also by using Skeletons the store will be less likely to experience Cumulative Layout Shilf (or CLS)(opens in a new tab).

Import:

import Skeleton from "$store/components/ui/Skeleton.tsx";

Usege:

<Skeleton variant="rect" width={140} height={140} />
<Skeleton variant="circle" width={140} height={140} />
<Skeleton variant="text" />

[gustavo-vasconcellos]

@brendonguedes are there any behavior or performance comparison between the nowadays components and some component that uses this Skeleton? I asks because you didnt implement any use of it on Fashion components 🤔