react-component / react-component/tabs
InkTabBarNode animates multiple times on page load
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 572
- Forks
- 241
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 4
Description
InkTabBarNode animates multiple times on page load. In this specific example the page is using hot module reloading, and react router dom. If we comment out the following line in componentDidUpdate(), it fixes the issue.
setTransform(inkBarNodeStyle, '');
If we set this element to animate, should we be directly modifying/resetting the style object properties? Would it make more sense to clone/spread the object, reset the appropriate fields, assign new values, and then assign the new object as the element style?
Or could we be smarter about updating the style only if certain attributes or properties changed from the last render, such as tab dimensions/position and selected tab?
InkTabBarNode.mov.zip
Contributor guide
No contributing guide indexed for this repository
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
Start by reproducing the attached InkTabBarNode example with hot module reloading and react-router-dom. Inspect InkTabBarNode's componentDidUpdate and the setTransform(inkBarNodeStyle, '') call to determine why page load triggers repeated animation. Done means the ink bar animates only once on page load in the reported scenario.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100