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.

Sign up for GitHub

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

Jump to bottom

feat: add header and bottom bar animations on webview scroll [LIVE-13180] #7559

Merged
merged 5 commits into from
Aug 12, 2024
Merged

feat: add header and bottom bar animations on webview scroll [LIVE-13180] #7559

merged 5 commits into from
Aug 12, 2024

Conversation

Justkant
Copy link
Contributor

@Justkant Justkant commented Aug 8, 2024 •
edited by jira bot
Loading

✅ Checklist

  • npx changeset was attached.
  • Covered by automatic tests. The animation itself is not covered by tests as we disable/mock them in tests, but it's tested a lot manually
  • Impact of the changes:
    • Animations on web3hub pages that are still behind a disabled FF

📝 Description

Add header and bottom bar animations on Webview scroll
Also sync scroll on other pages with paddingTop under the absolute position for the header

Refactor:

  • move header directly in the screen component
  • Allows to remove shared header context
  • Simplify a bit by removing the need for insets on some children components
  • Share most of the animation logic (exception with the BottomBar currently as it's not even using the transform)
  • Fix some edge cases with the scrollHandler logic to not diff if no begin drag was done and to not start on a negative value
  • Going with headerShown false requires us to use the SafeAreaView on our screens
  • All tests still work after big refactor with no changes (no implementation detail in the tests makes this possible)
  • Could extract the opacity animation from the AnimatedBar to simplify a bit the component and allow the parent to decide how to display the children
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-08-08.at.16.36.15.small.mp4

❓ Context

🧐 Checklist for the PR Reviewers

  • The code aligns with the requirements described in the linked JIRA or GitHub issue.
  • The PR description clearly documents the changes made and explains any technical trade-offs or design decisions.
  • There are no undocumented trade-offs, technical debt, or maintainability issues.
  • The PR has been tested thoroughly, and any potential edge cases have been considered and handled.
  • Any new dependencies have been justified and documented.
  • Performance considerations have been taken into account. (changes have been profiled or benchmarked if necessary)

@Justkant Justkant self-assigned this Aug 8, 2024
@Justkant Justkant requested a review from a team as a code owner August 8, 2024 14:44
@vercel Vercel
Copy link

vercel bot commented Aug 8, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

5 Skipped Deployments
Name Status Preview Comments Updated (UTC)
ledger-live-docs ⬜️ Ignored (Inspect) Visit Preview Aug 12, 2024 10:38am
ledger-live-github-bot ⬜️ Ignored (Inspect) Visit Preview Aug 12, 2024 10:38am
native-ui-storybook ⬜️ Ignored (Inspect) Visit Preview Aug 12, 2024 10:38am
react-ui-storybook ⬜️ Ignored (Inspect) Visit Preview Aug 12, 2024 10:38am
web-tools ⬜️ Ignored (Inspect) Visit Preview Aug 12, 2024 10:38am

@live-github-bot live-github-bot bot added mobile Has changes in LLM translations Translation files have been touched labels Aug 8, 2024
@live-github-bot live-github-bot bot added the common Has changes in live-common label Aug 8, 2024
@ben778899 ben778899 changed the title feat: add header and bottom bar animations on webview scroll [LIVE-13188] feat: add header and bottom bar animations on webview scroll [LIVE-13180] Aug 9, 2024
@Justkant
feat: add header and bottom bar animations on webview scroll [LIVE-13…
6ebea98 
…188]

Also sync scroll on other pages with paddingTop under the absolute position for the header
@Justkant
fix: add some padding on loading indicator
b75593c
@Justkant
refactor: move header directly in the screen component
437246f 
Allows to remove shared header context
Simplify a bit by removing the need for insets on some children components
Share most of the animation logic
Fix some edge cases with the scrollHandler logic to not diff if no begin drag was done and to not start on a negative value
Going with headerShown false requires us to use the SafeAreaView on our screens
All tests still work after big refactor (no implementation detail in the tests makes this possible)
@Justkant Justkant requested a review from RamyEB August 9, 2024 16:29
@Justkant Justkant merged commit c407b7a into develop Aug 12, 2024
56 of 58 checks passed
@Justkant Justkant deleted the feat/LIVE-13188 branch August 12, 2024 13:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@RamyEB RamyEB RamyEB approved these changes

Assignees

@Justkant Justkant

Labels
common Has changes in live-common mobile Has changes in LLM translations Translation files have been touched
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Justkant @RamyEB