{"componentChunkName":"component---src-pages-patterns-loading-pattern-index-mdx","path":"/patterns/loading-pattern/","result":{"pageContext":{"frontmatter":{"title":"Loading","description":"Loading patterns are used when information takes an extended amount of time to process and appear on screen."},"relativePagePath":"/patterns/loading-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"8dea62fe-e332-5624-b673-673e8d34554d","children":[],"parent":"bc907e31-4f20-5841-950e-476ea6447e62","internal":{"content":"---\ntitle: Loading\ndescription: Loading patterns are used when information takes an extended amount of time to process and appear on screen.\n---\n\n\n\nLoading patterns are used when information takes an extended amount of time to process and appear on-screen. Skeleton states and the loading component are two visual indicators that communicate that data is loading and that the screen is not frozen.\n\n\n\n\n\nOverview\nSkeleton states\nLoading indicators\nProgressive loading\nLoad more options\nAccessibility\nRelated\nReferences\nFeedback\n\n\n\n## Overview\n\nLoading strategies assure users that their request is in progress and can create the illusion of shorter load times in apps. According to [research](https://www.nngroup.com/articles/progress-indicators/) conducted by the Nielsen Norman Group, skeleton states and other loading indicators improve user satisfaction.\n\nIn this pattern, we will look at skeleton states, loading indicators, and progressive loading.\n\n## Skeleton states\n\nSkeleton states are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet. They should only appear for only a few seconds, disappearing once components and content populate the page.\n\n\n\n\n\n\nExample of a skeleton state\n\n\n
\n\nSkeleton states use motion to convey that the page is not stuck and that data is still being loaded. This can help to [reduce user uncertainty](https://www.nngroup.com/articles/progress-indicators/).\n\nOnly use skeleton states on container-based components like tiles and structured lists or data-based components like data tables and cards. In most cases, action components (e.g. buttons, input fields, checkboxes, toggles) do not need to have a skeleton state.\n\nNever represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states. Elements inside a modal may have a skeleton state, but the modal itself should not.\n\n## Loading indicators\n\nLoading indicators signal a user action is processing. Unlike progress bars, loading indicators only signal that loading is occurring and do not give any indication of progress. If a process will take more than a moment or two to complete, use a progress indicator instead.\n\nFull-screen loading indicators tell a user the entire application is processing, while inline indicators show that a specific selection or action is processing.\n\n### Full-screen loading\n\nThe [loading component](/components/loading/usage) should be used when the entire page is processing. This is often applied after data is submitted or saved by the user.\n\nIf the process is going to take more than a few minutes, consider including a [notification](/patterns/notification-pattern).\n\n\n\n\n\n\nExample of a progress indicator in an application\n\n\n
\n\n| When to use | |\n| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| _An action temporarily disables the application_ | If a user's action temporarily disables the application while processing occurs, use a loading indicator and a full-screen overlay. |\n| _Processing takes more than a few seconds_ | If a loading process will require the application's full resources and will take longer than a moment or two, use a full-screen loading indicator. |\n| _Data from user input is being saved or submitted_ | Saving data following with user input often takes a few moments. Using a loading indicator allows the application to finish processing before allowing the user to continue. |\n\n### Inline loading\n\nUse the inline loading component when a single component is processing. For example, when an administrator invites a user, an inline loading component indicates the system is processing the invite request.\n\n\n\n\n\n\nExample of an inline loading indicator\n\n\n
\n\n## Progressive loading\n\nProgressive loading is a technique that loads pages in batches. The simplest view of the page loads first, followed by progressively more detailed batches until the entire viewport has loaded.\n\nThe primary batch should show a page’s basic structure (the skeleton state versions of the container-based components), data-based text (the skeleton state version of text) and non-data text. Following batches can include images, content outside of the viewport, interactive (action-based) components, and data-based text.\n\nNot all items need a skeleton state and instead can be expressed as negative or white space until they load. For example, a 600 x 600px image can be shown as a 600 x 600px area of white space until the full image loads.\n\n\n\n\n\n\nPhases of progressive loading\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n
\n\n| When to use | |\n| -------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| _A page view is slow to load_ | Pages that source data from multiple sources, such as dashboards, and can be slow to load. |\n| _A user changes filters or facets in a table view_ | Tables may be sourcing information from large data sets and so processing may take a few moments. |\n\n## Load more options\n\nA Load more option can be used to extend a list where only a small fraction of options are displayed. It can also be used in cases where the list of options is populated via a database. Using Load more allows the data to load in progressive batches.\n\n\n\n\n\n\nExample of Load more\n\n\n
\n\n## Accessibility\n\nA screen reader should [notify a user](https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy) if an application is loading, busy, gets stuck, or if a process fails.\n\nFor specific loading accessibility concerns, see the WCAG documentation for [Notification of Loading/Busy](https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy) and adhere to accessibility guidelines for the [loading component](/components/loading/accessibility).\n\n## Related\n\n\n\n\n#### Components\n\n- [Data table](/components/data-table/code)\n- [Loading](/components/loading/code)\n- [Pagination](/components/pagination/code)\n\n\n\n\n#### Patterns\n\n- [Empty states](/patterns/empty-states-pattern)\n- [Forms](/patterns/forms-pattern)\n- [Notifications](/patterns/notification-pattern)\n\n\n
\n\n## References\n\n- Bill Chung, [Everything you need to know about skeleton states](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a) (Medium UX Collective, 2018)\n- Jakob Nielsen, [Progress Indicators Make a Slow System Less Insufferable](https://www.nngroup.com/articles/progress-indicators/) (Nielsen Norman Group, 2001)\n- Web Content Accessibility Guidelines, [Notification of Loading/Busy](https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy) (W3C, 2016)\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments [on GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","type":"Mdx","contentDigest":"a269c73ec14716e2e0ac4360c14d2e8b","counter":1682,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Loading","description":"Loading patterns are used when information takes an extended amount of time to process and appear on screen."},"exports":{},"rawBody":"---\ntitle: Loading\ndescription: Loading patterns are used when information takes an extended amount of time to process and appear on screen.\n---\n\n\n\nLoading patterns are used when information takes an extended amount of time to process and appear on-screen. Skeleton states and the loading component are two visual indicators that communicate that data is loading and that the screen is not frozen.\n\n\n\n\n\nOverview\nSkeleton states\nLoading indicators\nProgressive loading\nLoad more options\nAccessibility\nRelated\nReferences\nFeedback\n\n\n\n## Overview\n\nLoading strategies assure users that their request is in progress and can create the illusion of shorter load times in apps. According to [research](https://www.nngroup.com/articles/progress-indicators/) conducted by the Nielsen Norman Group, skeleton states and other loading indicators improve user satisfaction.\n\nIn this pattern, we will look at skeleton states, loading indicators, and progressive loading.\n\n## Skeleton states\n\nSkeleton states are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet. They should only appear for only a few seconds, disappearing once components and content populate the page.\n\n\n\n\n\n\nExample of a skeleton state\n\n\n
\n\nSkeleton states use motion to convey that the page is not stuck and that data is still being loaded. This can help to [reduce user uncertainty](https://www.nngroup.com/articles/progress-indicators/).\n\nOnly use skeleton states on container-based components like tiles and structured lists or data-based components like data tables and cards. In most cases, action components (e.g. buttons, input fields, checkboxes, toggles) do not need to have a skeleton state.\n\nNever represent toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states. Elements inside a modal may have a skeleton state, but the modal itself should not.\n\n## Loading indicators\n\nLoading indicators signal a user action is processing. Unlike progress bars, loading indicators only signal that loading is occurring and do not give any indication of progress. If a process will take more than a moment or two to complete, use a progress indicator instead.\n\nFull-screen loading indicators tell a user the entire application is processing, while inline indicators show that a specific selection or action is processing.\n\n### Full-screen loading\n\nThe [loading component](/components/loading/usage) should be used when the entire page is processing. This is often applied after data is submitted or saved by the user.\n\nIf the process is going to take more than a few minutes, consider including a [notification](/patterns/notification-pattern).\n\n\n\n\n\n\nExample of a progress indicator in an application\n\n\n
\n\n| When to use | |\n| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| _An action temporarily disables the application_ | If a user's action temporarily disables the application while processing occurs, use a loading indicator and a full-screen overlay. |\n| _Processing takes more than a few seconds_ | If a loading process will require the application's full resources and will take longer than a moment or two, use a full-screen loading indicator. |\n| _Data from user input is being saved or submitted_ | Saving data following with user input often takes a few moments. Using a loading indicator allows the application to finish processing before allowing the user to continue. |\n\n### Inline loading\n\nUse the inline loading component when a single component is processing. For example, when an administrator invites a user, an inline loading component indicates the system is processing the invite request.\n\n\n\n\n\n\nExample of an inline loading indicator\n\n\n
\n\n## Progressive loading\n\nProgressive loading is a technique that loads pages in batches. The simplest view of the page loads first, followed by progressively more detailed batches until the entire viewport has loaded.\n\nThe primary batch should show a page’s basic structure (the skeleton state versions of the container-based components), data-based text (the skeleton state version of text) and non-data text. Following batches can include images, content outside of the viewport, interactive (action-based) components, and data-based text.\n\nNot all items need a skeleton state and instead can be expressed as negative or white space until they load. For example, a 600 x 600px image can be shown as a 600 x 600px area of white space until the full image loads.\n\n\n\n\n\n\nPhases of progressive loading\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n
\n\n| When to use | |\n| -------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| _A page view is slow to load_ | Pages that source data from multiple sources, such as dashboards, and can be slow to load. |\n| _A user changes filters or facets in a table view_ | Tables may be sourcing information from large data sets and so processing may take a few moments. |\n\n## Load more options\n\nA Load more option can be used to extend a list where only a small fraction of options are displayed. It can also be used in cases where the list of options is populated via a database. Using Load more allows the data to load in progressive batches.\n\n\n\n\n\n\nExample of Load more\n\n\n
\n\n## Accessibility\n\nA screen reader should [notify a user](https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy) if an application is loading, busy, gets stuck, or if a process fails.\n\nFor specific loading accessibility concerns, see the WCAG documentation for [Notification of Loading/Busy](https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy) and adhere to accessibility guidelines for the [loading component](/components/loading/accessibility).\n\n## Related\n\n\n\n\n#### Components\n\n- [Data table](/components/data-table/code)\n- [Loading](/components/loading/code)\n- [Pagination](/components/pagination/code)\n\n\n\n\n#### Patterns\n\n- [Empty states](/patterns/empty-states-pattern)\n- [Forms](/patterns/forms-pattern)\n- [Notifications](/patterns/notification-pattern)\n\n\n
\n\n## References\n\n- Bill Chung, [Everything you need to know about skeleton states](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a) (Medium UX Collective, 2018)\n- Jakob Nielsen, [Progress Indicators Make a Slow System Less Insufferable](https://www.nngroup.com/articles/progress-indicators/) (Nielsen Norman Group, 2001)\n- Web Content Accessibility Guidelines, [Notification of Loading/Busy](https://www.w3.org/WAI/GL/wiki/Notification_of_Loading/Busy) (W3C, 2016)\n\n## Feedback\n\nHelp us improve this pattern by providing feedback, asking questions, and leaving any other comments [on GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md).\n","fileAbsolutePath":"/zeit/3f757860/src/pages/patterns/loading-pattern/index.mdx"}}}}