duolicious / duolicious-frontend

The frontend of the Duolicious dating app
https://duolicious.app/
GNU Affero General Public License v3.0
32 stars 12 forks source link

Add scroll mode #341

Open pc111c opened 1 week ago

pc111c commented 1 week ago

Add scroll mode for profiles

https://github.com/duolicious/duolicious-frontend/assets/54720236/b6de755f-38bb-4c01-94ff-7b9add602fd2

TODO: Tweak scroll thresholds

Related: https://github.com/duolicious/duolicious-frontend/issues/23

duogenesis commented 1 week ago

I like the general idea, but it's important to avoid making this feature similar to Tinder's swiping mechanism. It's surprising to me, but the word "swipe" is a trademark of Tinder, and I don't want Duolicious to encroach on their intellectual property.

What I envisaged for Duolicious was to have plain, old infinite scrolling instead of swiping. And also make it the default instead of a configurable mode. When someone taps on a profile from the search screen, they'll see that profile. If the user continues scrolling up or down, they'll see the profiles before/after it, in the same order they were shown in the search result pages.

pc111c commented 1 week ago

How about a single list with full profile instead of a profile card?

duogenesis commented 1 week ago

What I'd like is the single list with the full profile in addition to the profile cards. From a UX perspective, what I'd like is very similar to what you've already done. i.e. The user should still see the search results as they're currently displayed. And when the user navigates to a prospect profile from the search screen, they should still be able to skip or message the prospect, as shown in your demo. The difference between what I want and what you've done so far is infinite scrolling. Maybe your PR could be modified so that when the user skips a prospect, the screen scrolls down to the next profile.

duogenesis commented 1 week ago

But the user should also be able to scroll down to the next profile without having skipped the current one.

pc111c commented 1 week ago

I have modified the ProspectProfile so that when you scroll down it will load the next profile (not exactly infinity scrolling as it can't scroll up)

It might need to tweak some scroll thresholds for profiles that have no photos or descriptions since it will skip them with very little scroll.

https://github.com/duolicious/duolicious-frontend/assets/54720236/7d77dbfd-74af-4aa8-86c8-0dc2cbc8958d

duogenesis commented 1 week ago

I like where this PR is headed. It'd be nice if users could scroll up, but just being able to scroll down is an improvement, so I'm happy about that. Before I can merge it, I'd like a few rough edges rounded out:

  1. Scrolling to the next profile is a bit choppy and disorienting. To fix it, I think there should be a scrollview with prospect profiles in it. When the user gets to the bottom of one profile, the next profile should be appended to the end of the scrollview rather than replace the previous one.

  2. Visually, there'll need to be a way to clearly delineate adjacent profiles. I'm thinking that the skip/message buttons can be fixed to the bottom of the screen (as they are now), until the user scrolls down far enough. Once the user scrolls down far enough, the buttons can start to move upwards with the profile until they disappear off-screen.

When the user skips a profile, it'll still need to somehow become visually invisible.