DAPP-1550-blocks/Skeleton

[kalashshah]

Pull Request Template

Ticket Number

• Ticket Number
• Fixes #1550

Description

• Problem/Feature:
• Feature: Introduced a new Skeleton component in design system.
• The Skeleton component accepts loading state as a prop named isLoading. If the state is set to true, it renders the skeleton loader, else it renders its child component.
• Additional styles can be passed as props and supports an additional prop named css which supports additional styling similar to styled components taking reference from the typography component.

Type of Change

• [x] New feature

Checklist

• [ ] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [ ] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [ ] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

https://github.com/push-protocol/push-dapp/assets/81062983/d915d2c1-2f39-495b-9a86-74342a086286

Additional Context

Review & Approvals

• [x] Self-review completed
• [ ] Code review by at least one other engineer
• [ ] Documentation updates if applicable

Notes

[github-actions[bot]]

All looks good.

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-06-11 06:30 UTC

[github-actions[bot]]

All looks good.

[github-actions[bot]]

In the file provided, there are some issues that need to be addressed:

1. The import statements for Box, Button, Separator, Skeleton, and Text components seem to be incorrect or missing. They should be imported correctly with their respective paths.

2. There is a typo in the comment of the parsePixels function. It should be "numeric values fetched from px values".

3. There is a potential logic issue in the computePixels function. It is calculating the values incorrectly. The operation should be based on "add" or "sub". Consider revisiting the logic here.

4. There is a typo in the comment for the createBreakpointCSS function. It should be "media query css in string format for all screen sizes passed on to it".

5. In the createBreakpointCSS function, there is a missing semi-colon at the end of the string concatenation within the join method.

6. In the getCSSValue function, the check for whether the prop exists in propsWithCssVariables should use includes instead of hasOwnProperty.

7. In the getBlocksColor function, it is incorrectly returning the input color when it should be returning the CSS variable.

8. In the getResponsiveCSS function, there seems to be a mistake in how the breakpoint CSS is generated. The logic of creating the media queries and aggregating the styles should be reviewed.

9. There is a misplaced import statement for StyledComponents at the bottom of the file, which should be placed at the top with the other import statements.

After addressing these issues, you can write 'All looks good.' to confirm. Let me know if you need further assistance.

[github-actions[bot]]

All looks good.