diff --git a/docs/content/patterns/loading-states/loading-states.mdx b/docs/content/patterns/loading-states/loading-states.mdx index 632cdf70c2..bf1b24f53f 100644 --- a/docs/content/patterns/loading-states/loading-states.mdx +++ b/docs/content/patterns/loading-states/loading-states.mdx @@ -81,11 +81,12 @@ Full-section indicators are displayed over large sections of content or the enti #### For loading times under 10 seconds At this stage: -* Disable any actions that must be disabled for successful processing. (Ignore actions underneath the full-section indicator, as these will be inaccessible regardless.) -* The XLoader animation appears within an overlay (created via a dialog) over the container of the loading content. - * If the context requires additional information, add a label. Use labels sparingly, like at the start or end of important tasks or at particularly confusing junctions. -* If the button used to start the process is visible and located outside the container of the loading content, ensure it follows the process for inline indicators as well. -* The mouse cursor style changes to progress. + +- Disable any actions that must be disabled for successful processing. (Ignore actions underneath the full-section indicator, as these will be inaccessible regardless.) +- The XLoader animation appears within an overlay (created via a dialog) over the container of the loading content. + - If the context requires additional information, add a label. Use labels sparingly, like at the start or end of important tasks or at particularly confusing junctions. +- If the button used to start the process is visible and located outside the container of the loading content, ensure it follows the process for inline indicators as well. +- The mouse cursor style changes to progress. These effects last for a minimum of 1 second regardless of process duration. @@ -126,8 +127,52 @@ Feedback messages that appear after the process has returned a result should cle [Asynchronous UX](https://gitnation.com/contents/asynchronous-ux) - Toni Petrina, React Advanced Conference 2021 -## Related pages - -[Building Forms](https://www.marigold-ui.io/patterns/building-forms) - -[Forms](https://www.marigold-ui.io/recipes/form-recipes) +## Related + + + + + ), + }, + { + title: 'Forms', + href: '../recipes/forms', + caption: 'Here you can find some recipes for some form components.', + icon: ( + + + + ), + }, + ]} +/>