Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Skeleton loader #2940

Closed
eriknson opened this issue Dec 10, 2024 · 3 comments · Fixed by MetaMask/metamask-extension#29764 or MetaMask/metamask-extension#29920
Closed

Skeleton loader #2940

eriknson opened this issue Dec 10, 2024 · 3 comments · Fixed by MetaMask/metamask-extension#29764 or MetaMask/metamask-extension#29920
Assignees
@david0xd
Labels
release-12.12.0 Issue or pull request that will be included in release 12.12.0

Comments

@eriknson
Copy link
Member

eriknson commented Dec 10, 2024 •
edited by ajeetd
Loading

Let's introduce a flexible component to populate skeleton loaders arbitrarily in snaps custom UI. Devs can define width, height, and border-radius, which should cover most of our use-cases.

Suggested props;

  • borderRadius
  • width
  • height

DS has merged their Skeleton Loader Component here:
MetaMask/metamask-extension#29082
@eriknson
Copy link
Member Author

TBD: Exact animation / colors to be used

@eriknson
Copy link
Member Author

Gut-feeling: Let's mimic this

@eriknson
Copy link
Member Author

Related issue: MetaMask/metamask-extension#22278

@david0xd david0xd self-assigned this Jan 6, 2025
@david0xd david0xd mentioned this issue Jan 16, 2025
Merged
7 tasks
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this issue Jan 27, 2025
@david0xd
feat: Add Skeleton to Snaps UI components (#29764)
33db784 
## **Description**
Add Skeleton to Snaps UI components.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29764?quickstart=1)

## **Related issues**
Fixes: MetaMask/snaps#2940

## **Related Pull Requests**
Snaps PR: MetaMask/snaps#3024

## **Manual testing steps**
1. Make and install test Snap with source code that uses Skeleton
component.
2. Check if it matches expectations.

Snap UI JSX code used for testing:
```typescript
            <Container>
              <Box>
                <Text>Skeleton inside text component:</Text>
                <Text>
                  <Skeleton />
                </Text>
                <Text>Classic Skeleton inside a box:</Text>
                <Skeleton />
                <Text>Top level Skeleton: </Text>
                <Skeleton height={32} width="100%" />
                <Skeleton height={16} width="50%" borderRadius="none" />
                <Skeleton height={16} width="25%" borderRadius="medium" />
                <Skeleton height={32} width={32} borderRadius="full" />
                <Text>Skeleton inside Section: </Text>
                <Section>
                  <Skeleton height={32} width="100%" />
                  <Skeleton height={16} width="50%" borderRadius="none" />
                  <Skeleton height={16} width="25%" borderRadius="medium" />
                  <Skeleton height={32} width={32} borderRadius="full" />
                </Section>
                <Text>Skeleton inside Row: </Text>
                <Row label="Row">
                  <Skeleton height={22} width="30%" />
                </Row>
                <Row label="Row">
                  <Text>
                    <Skeleton height={22} width={40} />
                  </Text>
                </Row>
              </Box>
            </Container>
```

## **Screenshots/Recordings**
### **Before**
Skeleton was not available before. Nothing to show here.

### **After**
![Screenshot 2025-01-17 at 13 09
22](https://github.com/user-attachments/assets/fb1be740-f06d-4da0-80ec-7fb3c5cbf1d3)

## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
@FrederikBolding FrederikBolding mentioned this issue Jan 27, 2025
Merged
github-merge-queue bot pushed a commit to MetaMask/metamask-extension that referenced this issue Jan 27, 2025
@FrederikBolding @david0xd
chore: Bump Snaps packages (#29920)
f616af2 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Bump Snaps packages and handle any required changes.

Summary of Snaps changes:
- Add support for onAssetsLookup and onAssetsConversion handlers + the
`endowment:assets` permission
- Add `Intl` as a default global
- Add `Skeleton` component
- Add border radius prop to `Image`


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29920?quickstart=1)

## **Related issues**

Closes MetaMask/snaps#3027
Closes MetaMask/snaps#2940

---------

Co-authored-by: David Drazic <[email protected]>
github-merge-queue bot pushed a commit to MetaMask/metamask-extension that referenced this issue Jan 27, 2025
@FrederikBolding @david0xd
chore: Bump Snaps packages (#29920)
56ec93d 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Bump Snaps packages and handle any required changes.

Summary of Snaps changes:
- Add support for onAssetsLookup and onAssetsConversion handlers + the
`endowment:assets` permission
- Add `Intl` as a default global
- Add `Skeleton` component
- Add border radius prop to `Image`


[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29920?quickstart=1)

## **Related issues**

Closes MetaMask/snaps#3027
Closes MetaMask/snaps#2940

---------

Co-authored-by: David Drazic <[email protected]>
@metamaskbot metamaskbot added the release-12.12.0 Issue or pull request that will be included in release 12.12.0 label Jan 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@david0xd david0xd

Labels
release-12.12.0 Issue or pull request that will be included in release 12.12.0
Projects
None yet
Milestone
No milestone
3 participants
@david0xd @eriknson @metamaskbot