From dbaeda9bfec2309e32fb8aad09ab93033523233b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Mon, 22 Apr 2024 09:14:29 +0200 Subject: [PATCH] feat(Skeleton): stop the animation after 30 seconds --- .../docs/uilib/components/skeleton/info.mdx | 30 ++++++++++--------- .../__snapshots__/Skeleton.test.tsx.snap | 4 ++- .../skeleton/style/dnb-skeleton.scss | 6 ++-- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx index d323e6c37db..1d01ee00952 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/info.mdx @@ -12,15 +12,17 @@ import { ## Description -The Skeleton component is a visual building block helper. It will provide loading placeholders that display a non-interactive preview of the app’s actual UI to visually communicate that content is being processed. +The Skeleton component is a visual building block that helps provide loading placeholders. It displays a non-interactive preview of the actual UI of the app, visually communicating that content is being processed. -### Take in consideration +After 5 seconds an animation is shown that times out after 30 seconds. -It has to be used carefully and not as a quick loading indicator replacement. The reason lays in that, that the browser will use additional resources to render the additional state. And if it is misused, like showing not a nearly identical UI or it is shown for just a fraction of a second, then it will rather distract the user experience, than enhance it. +## Take in consideration -Also, the fact, that in some setups, the user is first downloading almost the whole web application before we actually are able to show some skeletons during the API calls. +It should be used carefully and not as a quick loading indicator replacement. The browser will use additional resources to render the additional state. If it is misused, such as showing a significantly different UI or being shown for just a fraction of a second, it can distract from the user experience rather than enhancing it. -#### Gatsby +Also, in some setups, the user may need to download almost the entire web application before skeletons can be shown during API calls. + +### Gatsby Gatsby as a framework makes the perfect fit to utilize a good skeleton user experience from the very first-page visit. Every page is optimized to load as fast as possible (in addition to page preloading and PWA). We can take advantage of this and show our skeleton as our initial state. @@ -29,33 +31,33 @@ Gatsby as a framework makes the perfect fit to utilize a good skeleton user expe 1. Now our applications renders. 1. And finally, we have the user data to display. -### Accessibility +## Accessibility - Elements and components should be still responsive to screen width and font-size. - Screen readers will get a mention that the loading state has finished as a aria-live update. - Components and interactive elements are not accessible for keyboard users. -### When not to use +## When not to use - For low-traffic pages, such as super-user-only admin pages, use a loading spinner instead. - For a tiny, inline action or feedback, e.g. clicked a button and the action will take time, use the [ProgressIndicator](/uilib/components/progress-indicator) instead (animation). - For fast processes that take less than `300ms`, consider the [ProgressIndicator](/uilib/components/progress-indicator) or no loading state at all. - For a background process or a long-running process, e.g. importing data or exporting reports, use the [ProgressIndicator](/uilib/components/progress-indicator) instead (percentage). -### When to use +## When to use - Use on high-traffic pages and landing pages, if they require a loading state. - Use when there’s more than one element loading at the same time that requires an indicator. - Use when the process would take more than `300ms` to load on an average internet connection. - Use the Skeleton component when the [ProgressIndicator](/uilib/components/progress-indicator) is not prominent enough. -### How to use +## How to use You can use the Skeleton component as a provider for all underlying components, like inputs and buttons. This way, you can simply toggle on and off the skeletons. And all the spacing and sizing will be given from the components themselves. But you can also use the Skeleton component to show a fake article or other figures. -### How it works +## How it works Every Eufemia component should support a skeleton natively. But for simplification, you can use the Skeleton component as a provider, so enable the skeletons for a group of components. @@ -65,25 +67,25 @@ But the Skeleton component also supports a set of ready-to-use figures. Use it l -### Global Provider +## Global Provider You can also use the global [Eufemia Provider](/uilib/usage/customisation/provider) to enable the underlying skeletons. You can even have multiple providers wrapped. -### Exclude a part +## Exclude a part You can easily exclude a part from being transformed to a skeleton by using `Skeleton.Exclude`. -### Suspense +## Suspense You can take advantage of an async component by using the React Suspense with a skeleton fallback. -### Create a custom skeleton +## Create a custom skeleton In order to create the same skeletons as the build-ins, you can make use of a couple of helper tools. diff --git a/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap b/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap index 0d8abcf311b..dd51eb0f98c 100644 --- a/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.tsx.snap @@ -19,6 +19,8 @@ exports[`Skeleton scss has to match style dependencies css 1`] = ` */ .dnb-skeleton { --skeleton-delay: 5s; + --skeleton-duration: 1.5s; + --skeleton-iteration-count: 20; } .dnb-skeleton img, .dnb-skeleton video { @@ -65,7 +67,7 @@ exports[`Skeleton scss has to match style dependencies css 1`] = ` background-repeat: repeat !important; background-size: 100% !important; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); - animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay); + animation: skeletonLinearAnimation var(--skeleton-duration) linear var(--skeleton-iteration-count) var(--skeleton-delay); } .dnb-skeleton--code pre, .dnb-skeleton--code pre *, diff --git a/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss b/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss index d6dc3193932..fc1f1ab52ae 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss @@ -9,6 +9,8 @@ .dnb-skeleton { --skeleton-delay: 5s; + --skeleton-duration: 1.5s; + --skeleton-iteration-count: 20; img, video { @@ -74,8 +76,8 @@ background-size: 100% !important; // to take presence clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); - animation: skeletonLinearAnimation 1.5s linear infinite - var(--skeleton-delay); + animation: skeletonLinearAnimation var(--skeleton-duration) linear + var(--skeleton-iteration-count) var(--skeleton-delay); } &--code,