A user interface must always show a skeleton loading state. The skeleton must match the final layout of the content. It must appear before any data is fetched.
By Pawan Nayar · from the LLOS AI Learning record
A user interface must always show a skeleton loading state.
The skeleton must match the final layout of the content. It must appear before any data is fetched.
A user interface should display a skeleton screen. This screen shows the structure of the page before the actual content loads. It helps the user understand what is coming. The skeleton should not be a blank screen or a simple 'Loading...' message. It should use placeholder shapes that look like the content. This makes the loading process feel faster and smoother for the user.
A developer creates a page that shows a list of products. When the page loads, the developer first shows gray boxes in the shape of product cards. These boxes have placeholder text and images. Then, the actual product information loads into these shapes. This is better than showing a blank page or just the word 'Loading'.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A modal dialog should appear in the center of the screen. It should fade in slowly.
A developer should define the purpose of each content block. This explains why the block exists.
A developer must treat mobile and desktop as two separate apps. They should use media queries to define distinct CSS layouts for each.
Using `overflow:hidden` and `max-height` on a section wrapper can hide content. For example, buttons at the bottom of a section might disappear.
A user interface must always show a skeleton loading state. The skeleton must match the final layout of the content. It must appear before any data is fetched.