A user interface should update quickly and smoothly. Rebuilding the entire display for small changes makes the interface slow and jumpy. Instead, change only the parts that need to be updated.
By Pawan Nayar · from the LLOS AI Learning record
A user interface should update quickly and smoothly.
Rebuilding the entire display for small changes makes the interface slow and jumpy. Instead, change only the parts that need to be updated.
For a list of items that are already loaded, a developer should show all items once. When a user filters the list, the developer should hide items that do not match. This is done by adding or removing a 'hidden' class to each item. The developer should not delete and recreate the entire list's HTML. This method prevents the screen from flashing and keeps the user's scroll position stable.
A developer creates a product catalog with 5,000 items. When a user types in a search box, the developer rebuilds the entire catalog display. The screen flashes with every letter typed. The user becomes frustrated because the display is slow and hard to read. A better way is to hide products that do not match the search. The visible products stay in place.
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.
Realistic diagrams often have parts that overlap. For example, a bicycle bell sits on a handlebar.
The user interface for Chapter 1 is the master design. All other chapters must use this design.
A developer must use `position: fixed` or `position: absolute` for an overlay pane. This makes the pane float above other content.
A developer must define a fixed total height for the main container. Every element inside this container needs a fixed slot.
A user interface should update quickly and smoothly. Rebuilding the entire display for small changes makes the interface slow and jumpy. Instead, change only the parts that need to be updated.