feat: add skeleton to drawer component #81
Conversation
EnriqueePerez
requested review from
vsseixaso,
RodrigoTadeuF and
leo-prange-vtex
and removed request for
a team
|
Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖 Please select which version do you want to release:
And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.
|
|
Beep boop 🤖 I noticed you didn't make any changes at the
In order to keep track, I'll create an issue if you decide now is not a good time
|
| @@ -159,6 +160,14 @@ function Drawer(props: Props) { | |||
| } | |||
| }, [onVisibilityChanged, isMenuOpen]) | |||
|
|
|||
| useEffect(() => { | |||
| if (isMenuOpen && !shouldRenderChildrenNow) { | |||
| setTimeout(() => { | |||
There was a problem hiding this comment.
Why is this setTimeout necessary? if the main concern is about conflict, you could check with the prevState from useState set
There was a problem hiding this comment.
Thanks to the setTimeout, the drawer will be rendered instanly, reducing the INP and the children are going to be mounted once the drawer is first mounted. I tried with promise but seems that the best approach is using this.
|
This PR closes this one |
What problem is this solving?
When the drawer contains too many components the INP performance time is too high. With this change, a skeleton (empty div) is shown while all the childrens are being mounted.
How to test it?
Workspace
Screenshots or example usage:
Describe alternatives you've considered, if any.
Related to / Depends on
How does this PR make you feel? 🔗
![](put .gif link here - can be found under "advanced" on giphy)