Feat/skeleton to drawer

[iago1501]

What problem is this solving?

We are improving INP in a drawer when opening the menu on mobile devices adding a skeleton when opening the drawer to reduce the visual interaction of the user. Before, the drawer was only opened when all menu items were loaded

How to test it?

To test it you need to open your browser and change to mobile devices.

After that, you will open the performance tab and add some throttling (Network: slow 4G and CPU: 6x throttling), it's important to add those values because the analysis on mobile devices is made considering medium or slow devices for non-heavy users

Before

After

Gravacao.de.Tela.2024-11-13.as.10.01.07.mov

How does this PR make you feel? 🔗

OBS: Sorry for the mess in the commits 😭

[vtex-io-ci-cd]

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:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

• There's nothing new to document 🤔
• I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

• I just updated 🎉🎉

[vsseixaso]

Nice! Use squash and merge for this PR 😅

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 0.18.0 → 0.18.1

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy [email protected]

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖