Feedback indicators component group purpose
Feedback indicators are a group of components that inform merchants about the status of a process, provide feedback on actions and tasks, or indicate progress.
Shopify Polaris · all subjects
feedback-indicators
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Skeleton body text purpose and usage
Skeleton body text is used to provide a low fidelity representation of content before it appears on the page, improving perceived load times for merchants. It can be used for content inside or outside of a card.
Skeleton body text best practice with Skeleton page
Skeleton body text should be used with Skeleton page when page content loads all at once. Together, these components give merchants an indication of what the page layout will be once loaded.
Skeleton body text standalone usage
Skeleton body text should be used on its own, inside any content container component like a card, when content loads after the main page load.
Skeleton body text line count accuracy
When using skeleton body text, try to match the number of lines to the content being loaded so it gives an accurate representation.
Skeleton body text should represent dynamic content only
Use skeleton body text for dynamic content that will change when the page fully loads. Show static content that never changes on a page without using skeleton loading. Do not use placeholder content that will change when the page fully loads.
Skeleton body text can represent non-typographic content
Skeleton body text can sometimes be used to represent non-typographic content such as forms.
Skeleton body text example: single line content
Skeleton body text can be used to represent a short, single line of text, such as a timestamp.
Skeleton body text component released in version
The SkeletonBodyText component was released in version 1.7.0.
Related components to Skeleton body text
Skeleton body text should be used with Skeleton page and Skeleton display text to represent the content of a page while it's loading. For giving feedback for in-context operations, use Progress bar or Spinner component instead.
SkeletonPage purpose and use
SkeletonPage is used with other skeleton loading components to provide a low fidelity representation of the UI before content appears. It improves load times perceived by merchants.
SkeletonPage best practice: pages with simultaneous content loading
SkeletonPage component should be used for pages where all content loads at the same time.
SkeletonPage best practice: mimic layout
SkeletonPage should give merchants an indication of what the page layout will be once loaded by mimicking its layout similarly to the state that will be loaded.
SkeletonPage content guideline: show static page titles
Show page titles that never change for a page. For example, keep the title 'Products' on the product list page, but use skeleton loading for titles that change on the product details page. Do not use placeholder content for titles that will change when the page fully loads.
SkeletonPage content guideline: secondary actions
Secondary actions are always represented with skeleton content. The number of skeleton actions can be changed to best represent the number of actions once loaded.
SkeletonPage do: use skeleton for dynamic content
Use skeleton loading for dynamic content, and use actual content for content that does not change.
SkeletonPage pitfall: placeholder content that changes
Do not use placeholder content that will change when the page fully loads, as this will confuse merchants and create a jumpy loading experience.
SkeletonPage related components
Related components are SkeletonBodyText and SkeletonDisplayText for representing blocks of content, and ProgressBar or Spinner for giving feedback for in-context operations.
Skeleton Thumbnail component purpose
The Skeleton Thumbnail component provides a low fidelity representation of an image before it appears on the page. It is used to improve the perceived load times for merchants and can be used for thumbnails in or outside of a card.
Skeleton Thumbnail size variants
The Skeleton Thumbnail component has four size variants: Extra small, Small, Medium, and Large.
Skeleton Thumbnail best practice: match thumbnail size
The Skeleton Thumbnail component should try to match the size of the thumbnail to the content being loaded so it gives an accurate representation.
Skeleton Thumbnail released in
The Skeleton Thumbnail component was released in version 3.7.2.
Skeleton Thumbnail related component
The Skeleton Thumbnail component can be used with the Skeleton Display Text component to represent the content of a card while it is loading.
Use feedback indicators for interaction feedback
Use feedback indicators like the progress bar component or spinner component to let merchants know that the interface received their request. If appropriate, provide added information about what or how long it will take to complete.
Use App Bridge Toast for non-disruptive feedback
For non-disruptive feedback on the outcome of an action, use the App Bridge Toast component.
Provide error information for unsuccessful actions
For an unsuccessful completion that requires the merchant to take action, provide information about what prevented the action from completing successfully and what the merchant can do to fix the problem. For example, use the validation error state of the text field component.
New badge styling and visual placement
The New badge should use the informational badge variant to achieve the correct styling and color. The badge should be right aligned or placed to the right of text. The page component in Polaris already places badges to the right of headings, so following this logic adds to the consistency of New badge use in the admin.
ProgressBar color prop replaced with tone
The ProgressBar component's color prop is replaced with tone. For example, <ProgressBar color="success" /> becomes <ProgressBar tone="success" />.