{"componentChunkName":"component---src-pages-patterns-loading-index-mdx","path":"/patterns/loading/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Loading","description":"Loading is applied when additional information takes an extended amount of time to process and appear on screen."},"relativePagePath":"/patterns/loading/index.mdx","titleType":"prepend","MdxNode":{"id":"686ea34d-a429-56e0-b6cc-d1176d48c9a2","children":[],"parent":"456e7aa1-f21e-50a7-86f9-fa40c74adc3f","internal":{"content":"---\ntitle: Loading\ndescription: Loading is applied when additional information takes an extended amount of time to process and appear on screen.\n---\n\n\n\nPurpose\nSkeleton states\nLoading components\nLoad more\n\n\n\n## Purpose\n\n_Loading_ is applied when additional information takes an extended amount of time to process and appear on screen. Skeleton states and the loading component are two interactions that communicate to users that data is currently loading and the screen is not frozen.\n\n## Skeleton states\n\n_Skeleton states_ are simplified versions of Carbon components used on an initial page load to indicate that the information on the page has not entirely loaded yet. They should only appear for 1–3 seconds, disappearing once the actual content loads in.\n\nA Carbon skeleton state is shown as a stripped down, bare bones version of a component, using a `$field-01` rectangular block for text. Motion is used in a skeleton state to convey that the page is not stuck loading but rather that data is still being pulled in.\n\n\n\n\n\n\n
Example of a text skeleton state in a data table.
\n\n\n\n\n### Usage\n\nSkeleton states are not meant to represent every component on a page, but rather to illustrate the overall architecture of the page while it's loading. Typically, components that should have skeleton states are container-based components _(tiles, structured list, etc.)_, data-based components _(e.g., data tables)_, and data-based text. Action components _(button, input fields, checkboxes, toggle, etc.)_ do not need to have a skeleton state in most use cases, as they are not pulling in data and do not need additional time to load in.\n\nThere are several components that should **never** be represented by a skeleton state since the data for these items should already be loaded in by the time a user interacts with them. These include:\n\n- Toast notification\n- Overflow menu\n- Dropdown items\n- Modal (elements inside a modal may have a skeleton state, however the modal itself should not be skeletonized)\n- Small and large loader (used for other loading cases but not skeleton states)\n\n### Progressive loading\n\nWhen utilizing skeleton states, the order in which components, data, and content load in needs to be planned and designed for using the _progressive loading_ technique. Progressive loading is when content loads in batches. The first batch to load should be the most simplified view of the page, followed by the secondary and tertiary batches, with each batch adding more page detail until the entire viewport has been loaded.\n\n \nThe primary batch should illustrate a page's structural layout (the skeleton state versions of the container-based components), data-based text (the skeleton state version of text) and non-data text. Secondary and tertiary batches can include images, content below the fold, interactive (action-based) components, and/or data-based text. Remember that not all items need a skeleton state, but instead can be expressed as negative or white space until they load in. _For example, a 600 x 600 px image could be shown as a 600 x 600 px area of white space until the secondary or tertiary batch when the full image loads in._\n\n\n\n\n\n\n
\n Example of a dashboard using skeleton states to demonstrate progressive\n loading\n
\n\n\n\n\n### Code\n\nThe skeleton state for _most_ components can be displayed simply by adding a modifier class of `bx--skeleton` to the component while data is loading and then removing the class after it has loaded in. You will have to create your own custom JavaScript to implement this based on your environment.\n\n```html\n\n\n```\n\nIf you are using our [React library](http://react.carbondesignsystem.com/) there are separate skeleton state components available to display while data is loading. View an [example](https://codesandbox.io/s/wq264y43k8) of this for React.\n\n```javascript\nconst DataComponent = ({ loading, data }) => {\n if (loading) {\n return ;\n }\n return ;\n};\n```\n\n| Component | Vanilla | React |\n| ------------------ | ----------------------------------------- | ----------------------------------------- |\n| Accordion | |  |\n| Breadcrumb |  |  |\n| Button |  |  |\n| Checkbox | |  |\n| Code Snippet | |  |\n| Data Table | |  |\n| Date Picker | |  |\n| Dropdown |  |  |\n| Icon |  |  |\n| Label |  |  |\n| Number Input |  |  |\n| Pagination | |  |\n| Progress Indicator |  |  |\n| Radio Button | |  |\n| Search | |  |\n| Skeleton Text |  |  |\n| Slider |  |  |\n| Small Toggle |  |  |\n| Structured List | |  |\n| Tabs |  |  |\n| Tag |  |  |\n| Text Area | |  |\n| Text Input | |  |\n| Toggle |  |  |\n\n## Loading components\n\nA _loading_ component is a rotating shape indicating the application is processing and informing users that the system has reacted to an action taken.\n\nUse cases include:\n\n- When data processing takes more than a few seconds but no longer than one minute to load in\n- User-inputted data is being saved or submitted\n\n### Loading (large)\n\nThe [_loading_](/components/loading/code) component should be used when the entire page is processing; for example, when data is being submitted or saved by the user.\n\n\n\n\n\n\n
Example of a large loader in context.
\n\n\n\n\n### Inline loading\n\nThe [_inline loading_](/components/inline-loading/code) component is used when a single component is processing and appears inline to the relative component. _For example, when a user sends a user invite, an inline loading component indicates the system is processing the invite request until the request is complete._\n\n\n\n\n\n\n
Example of inline loader in context.
\n\n\n\n\n## Load more\n\nA _load more_ action may be used to extend a list where there are a large number of options (25 or more) that the user can choose from. 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\n
Example of load more button in context.
\n\n\n\n","type":"Mdx","contentDigest":"64d8f4a6dc9f5861717830abbc0974ef","counter":1323,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Loading","description":"Loading is applied when additional information takes an extended amount of time to process and appear on screen."},"exports":{},"rawBody":"---\ntitle: Loading\ndescription: Loading is applied when additional information takes an extended amount of time to process and appear on screen.\n---\n\n\n\nPurpose\nSkeleton states\nLoading components\nLoad more\n\n\n\n## Purpose\n\n_Loading_ is applied when additional information takes an extended amount of time to process and appear on screen. Skeleton states and the loading component are two interactions that communicate to users that data is currently loading and the screen is not frozen.\n\n## Skeleton states\n\n_Skeleton states_ are simplified versions of Carbon components used on an initial page load to indicate that the information on the page has not entirely loaded yet. They should only appear for 1–3 seconds, disappearing once the actual content loads in.\n\nA Carbon skeleton state is shown as a stripped down, bare bones version of a component, using a `$field-01` rectangular block for text. Motion is used in a skeleton state to convey that the page is not stuck loading but rather that data is still being pulled in.\n\n\n\n\n\n\n
Example of a text skeleton state in a data table.
\n\n\n\n\n### Usage\n\nSkeleton states are not meant to represent every component on a page, but rather to illustrate the overall architecture of the page while it's loading. Typically, components that should have skeleton states are container-based components _(tiles, structured list, etc.)_, data-based components _(e.g., data tables)_, and data-based text. Action components _(button, input fields, checkboxes, toggle, etc.)_ do not need to have a skeleton state in most use cases, as they are not pulling in data and do not need additional time to load in.\n\nThere are several components that should **never** be represented by a skeleton state since the data for these items should already be loaded in by the time a user interacts with them. These include:\n\n- Toast notification\n- Overflow menu\n- Dropdown items\n- Modal (elements inside a modal may have a skeleton state, however the modal itself should not be skeletonized)\n- Small and large loader (used for other loading cases but not skeleton states)\n\n### Progressive loading\n\nWhen utilizing skeleton states, the order in which components, data, and content load in needs to be planned and designed for using the _progressive loading_ technique. Progressive loading is when content loads in batches. The first batch to load should be the most simplified view of the page, followed by the secondary and tertiary batches, with each batch adding more page detail until the entire viewport has been loaded.\n\n \nThe primary batch should illustrate a page's structural layout (the skeleton state versions of the container-based components), data-based text (the skeleton state version of text) and non-data text. Secondary and tertiary batches can include images, content below the fold, interactive (action-based) components, and/or data-based text. Remember that not all items need a skeleton state, but instead can be expressed as negative or white space until they load in. _For example, a 600 x 600 px image could be shown as a 600 x 600 px area of white space until the secondary or tertiary batch when the full image loads in._\n\n\n\n\n\n\n
\n Example of a dashboard using skeleton states to demonstrate progressive\n loading\n
\n\n\n\n\n### Code\n\nThe skeleton state for _most_ components can be displayed simply by adding a modifier class of `bx--skeleton` to the component while data is loading and then removing the class after it has loaded in. You will have to create your own custom JavaScript to implement this based on your environment.\n\n```html\n\n\n```\n\nIf you are using our [React library](http://react.carbondesignsystem.com/) there are separate skeleton state components available to display while data is loading. View an [example](https://codesandbox.io/s/wq264y43k8) of this for React.\n\n```javascript\nconst DataComponent = ({ loading, data }) => {\n if (loading) {\n return ;\n }\n return ;\n};\n```\n\n| Component | Vanilla | React |\n| ------------------ | ----------------------------------------- | ----------------------------------------- |\n| Accordion | |  |\n| Breadcrumb |  |  |\n| Button |  |  |\n| Checkbox | |  |\n| Code Snippet | |  |\n| Data Table | |  |\n| Date Picker | |  |\n| Dropdown |  |  |\n| Icon |  |  |\n| Label |  |  |\n| Number Input |  |  |\n| Pagination | |  |\n| Progress Indicator |  |  |\n| Radio Button | |  |\n| Search | |  |\n| Skeleton Text |  |  |\n| Slider |  |  |\n| Small Toggle |  |  |\n| Structured List | |  |\n| Tabs |  |  |\n| Tag |  |  |\n| Text Area | |  |\n| Text Input | |  |\n| Toggle |  |  |\n\n## Loading components\n\nA _loading_ component is a rotating shape indicating the application is processing and informing users that the system has reacted to an action taken.\n\nUse cases include:\n\n- When data processing takes more than a few seconds but no longer than one minute to load in\n- User-inputted data is being saved or submitted\n\n### Loading (large)\n\nThe [_loading_](/components/loading/code) component should be used when the entire page is processing; for example, when data is being submitted or saved by the user.\n\n\n\n\n\n\n
Example of a large loader in context.
\n\n\n\n\n### Inline loading\n\nThe [_inline loading_](/components/inline-loading/code) component is used when a single component is processing and appears inline to the relative component. _For example, when a user sends a user invite, an inline loading component indicates the system is processing the invite request until the request is complete._\n\n\n\n\n\n\n
Example of inline loader in context.
\n\n\n\n\n## Load more\n\nA _load more_ action may be used to extend a list where there are a large number of options (25 or more) that the user can choose from. 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\n