Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent slider from "flashing" when transitioning from SSR to CSR #14

Merged
merged 7 commits into from
Feb 6, 2020

Conversation

victorhmp
Copy link
Collaborator

What does this PR do?

Refactors a few components and custom hooks from the slider-layout internal implementation that prevents it from "flashing" when transitioning from SSR to CSR.

How to test it?

Both the Carousel and the Shelf in this workspace were replaced by list blocks using slider-layouts.

Related to / Depends on

This is related to vtex-apps/product-summary#229 and vtex-apps/store-theme#190 .

@victorhmp victorhmp self-assigned this Feb 4, 2020
@vtex-io-ci-cd
Copy link

vtex-io-ci-cd bot commented Feb 4, 2020

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

  • Minor

  • Major

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
Copy link

vtex-io-docs-bot bot commented Feb 4, 2020

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 🎉🎉

const handles = useCssHandles(CSS_HANDLES)
const { list } = useListContext()

const childrenArray = React.Children.toArray(children).concat(list)

const isSlideVisibile = (
const isSlideVisible = (
Copy link
Contributor

Choose a reason for hiding this comment

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

🙏

kaisermann
kaisermann previously approved these changes Feb 4, 2020
Copy link
Contributor

@Klynger Klynger left a comment

Choose a reason for hiding this comment

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

You shouldn't behave as a slider if you have less or equal items to a single page, it should only be simple list

onTouchEnd={e => (usePagination ? onTouchEnd(e) : null)}
onTouchMove={e => (usePagination ? onTouchMove(e) : null)}
onTouchStart={e =>
usePagination && !shouldBeStaticList ? onTouchStart(e) : null
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be nice to change the name of onTouchStart to handleTouchStart. And this usePagination variable is a bit confusing I read this and think that is a hook

Copy link
Contributor

Choose a reason for hiding this comment

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

And you could encapsulate all of this code inside of the callback and always pass it

iaronaraujo
iaronaraujo previously approved these changes Feb 6, 2020
@victorhmp victorhmp merged commit e976e90 into master Feb 6, 2020
@vtex-io-ci-cd
Copy link

vtex-io-ci-cd bot commented Feb 6, 2020

Your PR has been merged! App is being published. 🚀
Version 0.8.0 → 0.8.1

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

vtex deploy vtex.slider-layout@0.8.1

After that your app will be updated on all accounts.

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

@victorhmp victorhmp deleted the feature/better-ssr branch June 5, 2020 23:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants