aymericzip / aymericzip/intlayer
Latency / two-step expand when `minHeight` is set in `MaxHeightSmoother`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 833
- Forks
- 126
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 7
Description
When minHeight > 0, the expand animation has a visible “dead time.”
It behaves like grid-rows-[0fr] → xfr (no visible change), then xfr → 1fr (visible)
Steps to Repro:
- Render
MaxHeightSmootherwithminHeight={450}. - Toggle
isHiddento expand (or usehover/focuspaths).
Expected:
One smooth, continuous expand.
Actual:
Delayed/2-phase expand with an initial no-op period before content appears.
Notes:
Likely caused by the child minHeight clamping the grid track during grid-template-rows transition. Consider switching to animating max-height when minHeight is set, using minmax(0,1fr), or ensuring the grid item can shrink (min-height: 0).
https://github.com/user-attachments/assets/47399a7a-e500-48a8-beb7-288df164b3b4
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
Start at the MaxHeightSmoother component and trace the isHidden, minHeight, hover, and focus expansion paths. Reproduce the case with minHeight={450}, then inspect the grid-template-rows transition and confirm the fix produces one continuous expansion with no initial dead time.
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
- 45/100