RocketChat / RocketChat/Rocket.Chat.ReactNative
Add Skeleton and background to Avatar
Open
Nobody has claimed this yet.
🍭 good first issue
👍 improvement
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 1.5k
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 90
Description
To be done
- Add skeleton to Avatar
- Pay attention to all use cases this component has (emoji, static image, etc)
- This is good for UX, because nowadays we're rendering a blank space while avatar image is being fetched
- You can see a skeleton example on
VideoConferenceSkeletonLoading
- Add
colors.bannerBackgroundto Avatar when in dark modes- Some avatars might rendered in unexpectedly in dark/black mode, so we should render a grey color on the background to make it feel right.
- Keep it without background color on light mode
- Pay attention not to create a visual glitch rendering background and skeleton at the same time
Light mode
Dark mode
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the Avatar component and inspect the VideoConferenceSkeletonLoading example first. Check Avatar's emoji and static-image use cases, then implement loading and dark-mode background behavior without a visual overlap; done means the light and dark appearances match the shown expectations across those use cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100