{"componentChunkName":"component---src-pages-components-inline-loading-usage-mdx","path":"/components/inline-loading/usage/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Inline loading","description":"Inline loading spinners notify a user that their action is being processed.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/inline-loading/usage.mdx","titleType":"prepend","MdxNode":{"id":"ddfda853-805a-5bce-a9b8-e3606f0c5256","children":[],"parent":"f2491fd1-bd62-52d5-93bc-1a74776aaadd","internal":{"content":"---\ntitle: Inline loading\ndescription: Inline loading spinners notify a user that their action is being processed.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Format</AnchorLink>\n<AnchorLink>States</AnchorLink>\n\n</AnchorLinks>\n\n## General guidance\n\n_Inline loading_ spinners are used when performing actions. They help notify user's that their action is being processed.\nThe 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 an Inline loading component for any Create, Update, or Delete actions. The component provides feedback to the user about the progress of the action they took. This could be in a table, after a primary or secondary button click, or even in a modal.\n\n## Format\n\n- If the inline loading is being used to submit a form, the form fields should get disabled.\n\n- Descriptive text for the action is optional, but encouraged. If you have limited room or find adding text to be unnecessary you can just run through the animations.\n\n- The _success_ state of the inline loading component is active for 1.5 seconds before calling a optional function onSuccess. Use the onSuccess function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last indefinitely.\n\n- If an error occurs, the Inline loading component should be hidden and a error notification should be added or error handling within a form should appear.\n\n- The inline loading component should never be used to load a page or data.\n\n## States\n\n#### Loading\n\nThe _loading_ state indicates that the action is still in progress.\n\n<Row>\n<Column colLg={8}>\n\n![Example of inline loading](images/inline-loading-usage-1.png)\n\n</Column>\n</Row>\n\n#### Success\n\nThe _success_ state indicates that the action completed successfully.\n\n<Row>\n<Column colLg={8}>\n\n![Example of loading success](images/inline-loading-usage-2.png)\n\n</Column>\n</Row>\n\n#### Error\n\nThe _error_ state indicates that the action did not complete successfully.\n\n<Row>\n<Column colLg={8}>\n\n![Example of loading error](images/inline-loading-usage-3.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"37f872706096f6301ee3554119cf23e4","counter":1122,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Inline loading","description":"Inline loading spinners notify a user that their action is being processed.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Inline loading\ndescription: Inline loading spinners notify a user that their action is being processed.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Format</AnchorLink>\n<AnchorLink>States</AnchorLink>\n\n</AnchorLinks>\n\n## General guidance\n\n_Inline loading_ spinners are used when performing actions. They help notify user's that their action is being processed.\nThe 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 an Inline loading component for any Create, Update, or Delete actions. The component provides feedback to the user about the progress of the action they took. This could be in a table, after a primary or secondary button click, or even in a modal.\n\n## Format\n\n- If the inline loading is being used to submit a form, the form fields should get disabled.\n\n- Descriptive text for the action is optional, but encouraged. If you have limited room or find adding text to be unnecessary you can just run through the animations.\n\n- The _success_ state of the inline loading component is active for 1.5 seconds before calling a optional function onSuccess. Use the onSuccess function to refetch new data, close a modal, or reset a form. If no function is specified the success state will last indefinitely.\n\n- If an error occurs, the Inline loading component should be hidden and a error notification should be added or error handling within a form should appear.\n\n- The inline loading component should never be used to load a page or data.\n\n## States\n\n#### Loading\n\nThe _loading_ state indicates that the action is still in progress.\n\n<Row>\n<Column colLg={8}>\n\n![Example of inline loading](images/inline-loading-usage-1.png)\n\n</Column>\n</Row>\n\n#### Success\n\nThe _success_ state indicates that the action completed successfully.\n\n<Row>\n<Column colLg={8}>\n\n![Example of loading success](images/inline-loading-usage-2.png)\n\n</Column>\n</Row>\n\n#### Error\n\nThe _error_ state indicates that the action did not complete successfully.\n\n<Row>\n<Column colLg={8}>\n\n![Example of loading error](images/inline-loading-usage-3.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/inline-loading/usage.mdx"}}}}