[WIP] chore: Uses suspense to display skeletons for ProductTiles and ProductShelf sections
#119
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Preview is readyThis pull request generated a Preview👀 Preview: https://sfj-890b770--gatsby.preview.vtex.app |
danzanzini
changed the title
ProductTiles and ProductShelf sections
danzanzini
changed the title
ProductTiles and ProductShelf sectionsProductTiles and ProductShelf sections
renatamottam
added a commit
that referenced
this pull request
Jul 22, 2022
* Fixes Incentives text color * Improves text display on Hero and BannerText * Fixes ProductShelf padding top * Fixes tokens typo of button-buy * Improves ProductCard tokens * Creates Brandless theme * Fixes color actions tokens * Fixes ProductCard border * Updates global Tokens to match Brandless style * Removes Lato from Typography doc * Fixes Toggle tokens with Brandless * Creates two new themes * Fixes Border Color hover token
renatamottam
pushed a commit
that referenced
this pull request
Jul 22, 2022
* Feat: Theming brandless (#119) * Fixes Incentives text color * Improves text display on Hero and BannerText * Fixes ProductShelf padding top * Fixes tokens typo of button-buy * Improves ProductCard tokens * Creates Brandless theme * Fixes color actions tokens * Fixes ProductCard border * Updates global Tokens to match Brandless style * Removes Lato from Typography doc * Fixes Toggle tokens with Brandless * Creates two new themes * Fixes Border Color hover token * Feat: Theming Adjustments (#175) * Fixes `SectionListProps` * Fixes `Tiles` border-radius * Adds missing TokenColor on Interactive Controls page * Removes commented tokens from `CustomTheme` * Fixes theme class on body * Fixes `CartToggle` background color * Adds links between `SlideOver` Use Cases components * Fixes product-listing-pagination section * Removes Themes dependencies * Creates Themes pages * Fixes `Alert` bkg * Updates Changelog * Adds `TokenTable` to `Typography` page * Fixes Theme Section Storybook classes * Improves `Typography` doc page * Improves `Theme` doc pages titles Co-Authored-By: Fanny Chien <[email protected]> * Updates `Customizing` copy Co-authored-by: Fanny Chien <[email protected]> * Updates Changelog Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Fanny Chien <[email protected]> * Fixes static images url * Adjusts `Theming` proposal to Gatsby technology * Updates Changelog Co-authored-by: Fanny Chien <[email protected]> Co-authored-by: Fanny Chien <[email protected]>
|
Closing because it's inactive for a long time. There is a Jira task so we can tackle this at a later time |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
This PR changes the
ProductShelfandProductTilessections to properly useSuspenseto display itsSkeletons.How does it work?
It wraps both components into a
Suspenseclause. The wrapping is made at theindex.tsxfile of these components. This way, we could remove theSuspensecall from the homepage and theSkeletoncall inside the component.How to test it?
Go to the preview link and reload the homepage. The skeletons at the
ProductShelfandProductTilessections should appear in the proper place and without shifts.References
https://pt-br.reactjs.org/docs/concurrent-mode-suspense.html
https://sergiodxa.com/articles/swr/suspense/
Checklist
You may erase this after checking them all ;)
Changelog
CHANGELOG.mdat the beginning of its due section. The latest version should comes first.CHANGELOG.md. E.g., New items in thepull_request_template.md(#12)PR Description
Breaking change,Enhancement,BugorChore.ComponentNamecomponent.useWindowDimensionshook.Documentation