Skip to content
This repository has been archived by the owner on Jun 2, 2022. It is now read-only.

[FSSS-108] Feat: Add Skeleton Loading #317

Merged
merged 42 commits into from
Feb 21, 2022
Merged

[FSSS-108] Feat: Add Skeleton Loading #317

merged 42 commits into from
Feb 21, 2022

Conversation

lucasfp13
Copy link
Contributor

@lucasfp13 lucasfp13 commented Feb 8, 2022 •
edited
Loading

What's the purpose of this pull request?

This PR intends to add Skeleton Loading components to be visible while the real components are being loaded.

The Skeleton components will be used as a fallback for lazy-loaded components or while data is not ready.

How does it work?

We can observe the behavior when accessing a page. As long as the data is not ready, the skeleton components will be visible.

Desktop version:

Screen Shot 2022-02-09 at 17 25 42

Screen Shot 2022-02-09 at 17 25 55

Screen Shot 2022-02-09 at 17 26 59

Mobile version:

Screen Shot 2022-02-10 at 01 06 09Screen Shot 2022-02-10 at 01 05 07
Screen Shot 2022-02-10 at 01 05 21

References

Checklist

  • CHANGELOG entry added

@lucasfp13 lucasfp13 self-assigned this Feb 8, 2022
@vtex-sites
Copy link

vtex-sites bot commented Feb 8, 2022 •
edited
Loading

Preview is ready

This pull request generated a Preview

👀   Preview: https://preview-317--base.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 263371a

@lucasfp13 lucasfp13 changed the base branch from develop to master February 8, 2022 22:00
@lucasfp13 lucasfp13 force-pushed the feat/add-skeleton-loading branch from 596332e to c0257d2 Compare February 8, 2022 22:06
@netlify
Copy link

netlify bot commented Feb 8, 2022 •
edited
Loading

✔️ Deploy Preview for basestore ready!

🔨 Explore the source changes: 15cd92e

🔍 Inspect the deploy log: https://app.netlify.com/sites/basestore/deploys/6213b9c2f1f8300007c041c4

😎 Browse the preview: https://deploy-preview-317--basestore.netlify.app

@gatsby-cloud
Copy link

gatsby-cloud bot commented Feb 8, 2022 •
edited
Loading

Gatsby Cloud Build Report

basestore

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 2m

Performance

Lighthouse report

Metric Score
Performance 🔶 78
Accessibility 💚 100
Best Practices 💚 100
SEO 💚 93

🔗 View full report

@gatsby-cloud
Copy link

gatsby-cloud bot commented Feb 8, 2022 •
edited
Loading

Gatsby Cloud Build Report

basestore

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 4m

Performance

Lighthouse report

Metric Score
Performance 🔶 84
Accessibility 💚 100
Best Practices 💚 100
SEO 💚 93

🔗 View full report

@lucasfp13 lucasfp13 marked this pull request as ready for review February 10, 2022 04:40
@lucasfp13 lucasfp13 force-pushed the feat/add-skeleton-loading branch from 3fe9744 to 9c3fc37 Compare February 10, 2022 04:42
eduardoformiga
eduardoformiga suggested changes Feb 10, 2022
View reviewed changes
Copy link
Member

@eduardoformiga eduardoformiga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💀 💀 💀 Amazing Job! 🎉

I left some suggestions.

src/components/sections/ProductGallery/ProductGallery.tsx Outdated Show resolved Hide resolved
src/components/sections/ProductGallery/product-gallery.scss Outdated Show resolved Hide resolved
src/components/sections/ProductGallery/product-gallery.scss Outdated Show resolved Hide resolved
src/components/skeletons/ElementSkeleton/element-skeleton.scss Outdated Show resolved Hide resolved
src/components/skeletons/FilterSkeleton/filter-skeleton.scss Outdated Show resolved Hide resolved
src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss Outdated Show resolved Hide resolved
src/components/skeletons/ProductCardSkeleton/product-card-skeleton.scss Outdated Show resolved Hide resolved
src/components/skeletons/Shimmer/shimmer.scss Outdated Show resolved Hide resolved
src/components/skeletons/Shimmer/shimmer.scss Outdated Show resolved Hide resolved
src/components/skeletons/Shimmer/shimmer.scss Outdated Show resolved Hide resolved
@eduardoformiga
Copy link
Member

eduardoformiga commented Feb 10, 2022 •
edited
Loading

Just notice now. Could you please remove it from the product-gallery.scss and update the CHANGELOG.md?

// Check it after apply Skeletons.
.product-listing__data-loading {

@hellofanny
Copy link
Contributor

Just notice now. Could you please remove it from the product-gallery.scss and update the CHANGELOG.md?

// Check it after apply Skeletons.
.product-listing__data-loading {

Oh yeah! Nice cathingggg 🚀

@lucasfp13 lucasfp13 force-pushed the feat/add-skeleton-loading branch from 6c17cd9 to 3b54f9a Compare February 12, 2022 16:19
@lucasfp13 lucasfp13 force-pushed the feat/add-skeleton-loading branch from f034975 to f120de5 Compare February 16, 2022 13:43
lucasfp13 and others added 23 commits February 21, 2022 12:33
@lucasfp13
Rename skeleton components
8d1fc63
@lucasfp13
Apply composition in SkeletonElement and SkeletonFilter
6ea4b31 
 components
@lucasfp13
Add ProductGrid skeleton
0111cd8
@lucasfp13
Add ProductShelf skeleton
0e31408
@lucasfp13
Add ProductTiles skeleton
5878ad2
@lucasfp13
Add CHANGELOG entry
3eae783
@lucasfp13
Use translate3d for performance sake
281c972
@lucasfp13
Remove unnecessary checking
c43c26f
@lucasfp13
Minor fixes
71b2d00
@lucasfp13
Fixes after rebase
a04447b
@lucasfp13
Use PropsWithChildren instead get children as prop
e7becb5
@lucasfp13
Adjust animation to use absolute unit vw
efda4ae
@lucasfp13
Adjust shimmer effect animation
f878818
@lucasfp13
Rename skeleton components according to its context
e9b0d52
@lucasfp13
Fix shimmer wrapper width
d380482
@lucasfp13
Replace magic number by a temporary constant
b41b78f
@lucasfp13
Add new color token for skeleton's background
f60604e
@lucasfp13
Use function for skeleton components
6a326fe
@lucasfp13 @hellofanny
Apply suggestions from code review
9f9841e 
Co-authored-by: Fanny Chien <fannychienn@gmail.com>
@lucasfp13
Trigger CI with an empty commit
404f841
@lucasfp13
Remove unnecessary optional chaining operators
7754624
@lucasfp13
Trigger CI with an empty commit
7487702
@lucasfp13
Use PropsWithChildren instead get children as prop
6d0ee04
@lucasfp13 lucasfp13 force-pushed the feat/add-skeleton-loading branch from b077995 to 6d0ee04 Compare February 21, 2022 15:34
@hellofanny
Copy link
Contributor

Just notice now. Could you please remove it from the product-gallery.scss and update the CHANGELOG.md?

// Check it after apply Skeletons.
.product-listing__data-loading {

Oh yeah! Nice cathingggg 🚀

Checked here! ✅

hellofanny
hellofanny approved these changes Feb 21, 2022
View reviewed changes
Copy link
Contributor

@hellofanny hellofanny left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done!! 🚀 🚀 What a huge PR 🙈

@lucasfp13 lucasfp13 merged commit 263371a into master Feb 21, 2022
@lucasfp13 lucasfp13 deleted the feat/add-skeleton-loading branch February 21, 2022 17:28
@renatamottam renatamottam mentioned this pull request Feb 23, 2022
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@tlgimenes tlgimenes tlgimenes left review comments

@renatamottam renatamottam renatamottam left review comments

@filipewl filipewl filipewl approved these changes

@hellofanny hellofanny hellofanny approved these changes

@danzanzini danzanzini danzanzini approved these changes

@eduardoformiga eduardoformiga eduardoformiga approved these changes

@igorbrasileiro igorbrasileiro igorbrasileiro approved these changes

Assignees

@lucasfp13 lucasfp13

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
8 participants
@lucasfp13 @eduardoformiga @hellofanny @igorbrasileiro @filipewl @tlgimenes @danzanzini @renatamottam