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

feat: Add Skeleton to Snaps UI components #29764

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

feat: Add Skeleton to Snaps UI components #29764

wants to merge 4 commits into from
+69 −1

Conversation

david0xd
Copy link
Contributor

@david0xd david0xd commented Jan 16, 2025 •
edited
Loading

Description

Add Skeleton to Snaps UI components.

Open in GitHub Codespaces

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:

            <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

Pre-merge author checklist

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.

@david0xd david0xd added the team-snaps-platform Snaps Platform team label Jan 16, 2025
@david0xd david0xd self-assigned this Jan 16, 2025
@github-actions GitHub Actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@david0xd david0xd force-pushed the dd/add-skeleton-snaps-ui branch from cb6ae47 to 38dd785 Compare January 16, 2025 20:13
@david0xd david0xd mentioned this pull request Jan 16, 2025
Merged
@metamaskbot
Copy link
Collaborator

Builds ready [ac0d545]
Page Load Metrics (1661 ± 67 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint63819741600255123
domContentLoaded14391934164013866
load14671979166113967
domInteractive237342147
backgroundConnect64816136
firstReactRender1597413015
getState473242210
initialActions00000
loadScripts10451446120811455
setupStore55511136
uiStartup161427521973268128
Bundle size diffs [🚀 Bundle size reduced!]
  • background: 0 Bytes (0.00%)
  • ui: 4.42 KiB (0.06%)
  • common: -372 Bytes (-0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [05f71fb]
Page Load Metrics (1830 ± 79 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint22921991226753362
domContentLoaded15422166181216579
load15572182183016579
domInteractive2694512110
backgroundConnect666262010
firstReactRender16176654119
getState55415136
initialActions01000
loadScripts11311588133413062
setupStore685232512
uiStartup180128752289323155
Bundle size diffs [🚀 Bundle size reduced!]
  • background: 239 Bytes (0.00%)
  • ui: 6.42 KiB (0.08%)
  • common: -277 Bytes (-0.00%)

david0xd added a commit to MetaMask/snaps that referenced this pull request Jan 20, 2025
@david0xd
Add Skeleton component (#3024)
d71d6d8 
### Add Skeleton component.

Related PR in extension:
MetaMask/metamask-extension#29764

#### Code example
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
![Screenshot 2025-01-17 at 13 09
22](https://github.com/user-attachments/assets/7ebd5646-6664-4b72-8578-33e7db6557a5)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@david0xd david0xd

Labels
team-snaps-platform Snaps Platform team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Skeleton loader
2 participants
@david0xd @metamaskbot