search

openfoodfacts / smooth-app

🤳🥫 The new Open Food Facts mobile application for Android and iOS, crafted with Flutter and Dart
https://world.openfoodfacts.org/open-food-facts-mobile-app?utm_source=off&utf_medium=web&utm_campaign=github-repo
Apache License 2.0
786 stars 271 forks source link

The personal ranking search button jumps when scrolling #2172

Open VaiTon opened 2 years ago

VaiTon commented 2 years ago

What

Steps to reproduce the behavior

  1. Search a product name on the main screen
  2. Scroll to the bottom
  3. See that the button at the bottom with the trophy jumps from a position to another

Expected behavior

The transition should be animated. Otherwise the button should remain in the same position. Maybe move it to the left?

Why

Screenshot/Mockup/Before-After

https://user-images.githubusercontent.com/12072630/172057612-4b368640-d3ca-4c98-8fe2-c9a471750bc9.mp4

monsieurtanuki commented 2 years ago

The reason behind that is the "go back to the top" FAB that appears when you're not on the top anymore; there are two modes:

  1. just the "ranking" FAB, centered
  2. both the "ranking" FAB and the "top" FAB

Should we keep just mode 2, making the "top" FAB either invisible or deactivated when relevant?

VaiTon commented 2 years ago

What about keeping them both and having the "raking" FAB animate to that position instead of jumping?

monsieurtanuki commented 2 years ago

@VaiTon If you want to talk about "animation" you should talk with someone else (unless you want to talk about movies) (but not a big fan of animations in flutter).

That said, the stuttering effect is problematic. If I refine my latest suggestion, we could have both buttons always there (no jump, then), with the "go to top" button being activated/deactivated progressively - does that count as an animation?

VaiTon commented 2 years ago

@monsieurtanuki what about leaving the ranking button always on the left ? And leave the "top" button as it is?

monsieurtanuki commented 2 years ago

what about leaving the ranking button always on the left ? And leave the "top" button as it is?

@VaiTon Then the "ranking" button will shrink when the "top" button appears. Besides, the main button is the "ranking" button - does that make sense to put the main button on the left, I don't know.

monsieurtanuki commented 2 years ago

Additional thought: that's a bit weird to have a different "go to ranking page" behavior between product list pages (like "History") and query product list page (like "nutella"). Shouldn't we use the same mechanism, and in both cases use: