From 783a15c51394e675f3a1eaa08995a276055d3100 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:23:23 +1000 Subject: [PATCH] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 6 +----- .../loading/design/page-section-loading/content.mdoc | 8 ++------ 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 9d85dcc35..2a6b8c6b2 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -14,7 +14,7 @@ Display after about 1-2 seconds ### What -The most common page loading pattern is a simple, animated spinning icon on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. +The most common page loading pattern is a simple, animated [Progress Indicator](/components/progress-indicator) (or Spinner icon) on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. #### Spinner vs animation @@ -37,7 +37,3 @@ Description of what will be displayed ); }; ``` - -#### Components - -[Progress indicator](/components/progress-indicator) (Spinner) diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc index 3f976a412..569f0ad4e 100644 --- a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc @@ -1,4 +1,4 @@ -Sometimes the system is waiting for only a portion of the page to load, when only a part of the page is still loading we use a Skeleton loader +Sometimes the system is waiting for only a portion of the page to load, when only a part of the page is still loading we use a [Skeleton loader.](#) ### Why @@ -10,7 +10,7 @@ Display after about 200–500 milliseconds ### What -A Skeleton loader displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. +A [Skeleton loader](#) displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. ### Usage example @@ -29,7 +29,3 @@ Showing examples of skeleton loading. Could we do an animated demo where the ske ); }; ``` - -#### Components - -[Skeleton](#)