A loading state must always show a skeleton placeholder. The skeleton placeholder fills the space where content will appear. This placeholder should match the final layout of the content.
By Pawan Nayar · from the LLOS AI Learning record
A loading state must always show a skeleton placeholder.
The skeleton placeholder fills the space where content will appear. This placeholder should match the final layout of the content.
An AI model should never show a blank screen during loading. A blank screen makes the product seem broken. It can make a user leave the application. Instead, show a skeleton screen. A skeleton screen shows the structure of the page. It tells the user that content is coming soon. This makes the loading time feel faster, even if it is not.
A developer creates a new page for an AI model. This page will show many cards of information. While the AI model fetches the data for these cards, the developer displays empty card shapes. These shapes shimmer. When the data arrives, the real content replaces the shimmering shapes. This prevents the user from seeing an empty page.
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.
An overlay pane needs to be positioned correctly. Use `position: fixed` in the CSS code.
Place the search bar where users see it first. Make it large and use strong colors so it is easy to find.
A developer can hide the hamburger menu icon on large screens. The developer can hide the regular navigation menu on small screens.
Floating elements need a special stacking order. This order is called a stacking context.
A loading state must always show a skeleton placeholder. The skeleton placeholder fills the space where content will appear. This placeholder should match the final layout of the content.