{"componentChunkName":"component---src-pages-components-loading-usage-mdx","path":"/components/loading/usage/","webpackCompilationHash":"fbe446a994ab39eca9c3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Loading","description":"Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/loading/usage.mdx","titleType":"prepend","MdxNode":{"id":"4c7a3f3f-2cc0-5cd3-8e40-090ac5b9a0af","children":[],"parent":"56b36d43-dd5c-5681-ae89-7d5702b0e26e","internal":{"content":"---\ntitle: Loading\ndescription: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Loading_ spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.\n\nIt is best practice to use a loading spinner whenever the wait time is anticipated to be longer than three seconds.\n\n## Size\n\nLoading spinners may be scaled down if the loading experience is contextual to a certain item on the page.\n\n<Row>\n<Column colLg={8}>\n\n![Small loader](images/loading-usage-2.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"f4f78c9129ae4a3eae2c5cb31ffb3cd8","counter":1331,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Loading","description":"Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Loading\ndescription: Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Loading_ spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway. The waiting experience is a crucial design opportunity. Although it may not be obvious what is occurring on the back-end, we can communicate clearly to reassure the user that progress is happening.\n\nIt is best practice to use a loading spinner whenever the wait time is anticipated to be longer than three seconds.\n\n## Size\n\nLoading spinners may be scaled down if the loading experience is contextual to a certain item on the page.\n\n<Row>\n<Column colLg={8}>\n\n![Small loader](images/loading-usage-2.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/165188d6/src/pages/components/loading/usage.mdx"}}}}