Feat/show all playlists

[toumas]

Hey. Nice app! I've used it for a little while now. I noticed that not all of the playlists are loaded, so here are changes to make that happen. I also deleted unused yarn.lock and changed the wording in the readme.

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @rohitpotato on Vercel.

@rohitpotato first needs to authorize it.

[rohitpotato]

Hi @toumas

Firstly, thanks for taking out the time to suggest this feature and making a PR for it. I have reviewed the code and have a few concerns. Calling Playlists API for continuously loading more playlists will be a janky user experience.

I think a better UX would be to load this on scroll. Something like using intersectionObserver and loading when we reach the end of the list. Let me know your thoughts!

[toumas]

Yeah, you're right. I've updated the PR. Would eb8944c work?

[rohitpotato]

Hi @toumas, I see a couple of issues. You can use the getUserPlaylists method from the Spotify lib. Also, intersection observer can be written as a reusable hook. I don't see any configuration options in intersectionObserver in the current implementation. Needs to be tested that if only fires when reaching the end of the list or maybe a small threshold for better UX and stops firing when there are no more playlists to load.

For the loading state, the existing loading state disables the whole page when new playlists are loading, there needs to be a different state for scroll loading. Something similar to the already existing loading bar without the overlay (I might refactor that component at a later time) at the bottom of the screen.

What do you think?

[toumas]

I don't think getUserPlaylists handles pagination, so it will always load maximum of 50 entries as per Spotify web API documentation. Therefore I think it is simpler to let Spotify web API to handle the pagination by using the next property from the response.

The intersection observer doesn't fire when the observed element, in this case div#infinite-scroll-trigger, is hidden. That means that the API request is only sent once no matter how much you scroll.

[rohitpotato]

It does. Please refer to this: https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-list-users-playlists And this: https://jmperezperez.com/spotify-web-api-js/#src-spotify-web-api.js-constr.prototype.getuserplaylists

You can pass an options object to the function.

Ideally, for the intersection observer, the request should begin at a certain threshold before reaching the hidden element. A reusable hook will be better in this case.