🧱 ZUI: Skeleton

[ziggabyte]

Description

Skeletons are used to represent content that is on its way, because it is loading.

Screenshots

Figma link

https://www.figma.com/design/yIQMDEFSgkUOrSaJpg3k7N/ZUI?node-id=11045-147081&t=l6edCgukvJ5R7jQM-4
You need to be logged into a Figma account to properly view the Figma content.

Requirements

• Has three variants, text, circular and rectangular
• Styles match what is shown in Figma (note for example the rounded corners on the rectangle)

Open questions

None

Workflow

Suggestions for implementation

Use MUI Skeleton component for this.

Git

The main git branch for the work on the new design system is undocumented/new-design-system. Unless otherwise instructed, do your work on a new branch branched off from this branch.

Name your branch issue-number/zui-name, ex: issue-928/zui-button for a branch where work is done that is documented in the issue with number 928, where a button component is being made.

Storybook

Use Storybook to develop the new design system components. If you are not familiar with working with Storybook, please ask and Ziggi or someone else will be happy to introduce you!
When you have checked out the branch undocumented/new-design-system (and, as always when checking out a branch just to be sure, run yarn install), run yarn storybook in the terminal. This starts Storybook locally, and should open your browser to localhost:6006 where you see all the components. Note that you want to only look at the ones under the "Components" headline.

Files

Create a folder in src/zui/components and give it a name for your component, like ZUIButton. Inside that folder, create one file index.tsx (this is where you write your component) and one index.stories.tsx (this is where you write your Storybook stories). Look at the components in src/zui/components for inspiration/reference! Note that there are lots of components with names that start with "ZUI" outside the src/zui/components folder, but only the ones in src/zui/components are relevant as reference/inspiration for the work you will be doing.

[ziggabyte]

This issue is set as potentially blocked, because there needs to be a discussion of how ZUI handles loading