nimble-skeleton Component

[nate-ni]

😯 Problem to Solve

We need a skeleton component for loading content within a view.

💁 Proposed Solution

• FAST Component: https://explore.fast.design/components/fast-skeleton
• Other reference components:
  • https://skeleton.brainandbonesllc.com/tailwind/placeholders
  • https://ant.design/components/skeleton/
  • https://atlassian.design/components/menu/skeleton-heading-item/examples
  • https://atlassian.design/components/menu/skeleton-item/examples
  • https://atlassian.design/components/avatar/avatar-skeleton/examples
  • https://open-ui.org/components/skeleton.research

📋 Tasks

• nimble-skeleton interaction design issue
• nimble-skeleton interaction design spec
• nimble-skeleton visual design issue
• nimble-skeleton visual design spec
• nimble-skeleton spec
• nimble-skeleton custom element
• nimble-skeleton unit tests
• nimble-skeleton Storybook tests
• nimble-skeleton Storybook docs
• nimble-skeleton Angular wrapper
• nimble-skeleton Blazor wrapper
• Add to Angular example app
• Add to Blazor example app
• Update Component Status table in README and incubating status

[cameronwaterman]

We were recently discussing a need for this component with the Data Table grid (probably applies to other grids as well). When filtering, sometimes the queries can take some amount of time (>3 seconds), having some sort of loading indication would be great there. Not sure if a skeleton component is the right solution for this, though.

[fredvisser]

We haven't been asked for this pattern in Nimble-built apps. Cleaning up the backlog and closing as "not planned".