Enhancement | End of Infinite Scrolling

[aadeshkulkarni]

Where ?

• /blogs page
• Scroll to the end

Current

When user is scrolling to the end of the infinite scroll, no notification to indicate that they've reached the end of the feed.

Expectation

At the very end, the app should state, that it does not have any more blogs to show.

You can be creative with the message.

Here are some message options (feel free to ignore them and use yours):

• You've reached the end of the feed, but not the end of your journey!
• You've officially scrolled your way to the finish line! Time to stretch those scrolling fingers.
• Bravo! You've reached the depths of the feed. Now, let's dive into something new!
• You've successfully surfed the infinite wave of content. Time to ride the next one!
• You've made it to the center of the content universe. Now, let's explore new galaxies!
• Your scrolling adventure has reached its final chapter. But don't worry – there's always room for a sequel!
• No more content to load, but infinite possibilities await! Keep chasing your dreams.

[Kunall-singh]

Here's my approach to achieve the enhancement

To implement an end-of-feed message, I will use the react-infinite-scroll-component library. I will initialize the state to track the list of blogs and whether more blogs are available. I will use the InfiniteScroll component from the library to fetch additional blogs when the user scrolls to the bottom. The component will display a creative message when there are no more blogs to load. but if we don't want to use external library, then the code will look something like this, I will manage the state to track the list of blogs and whether more blogs are available. I will write a function to fetch additional blogs and add a scroll event listener to detect when the user has reached the bottom of the page. Upon reaching the end, I will display a creative message indicating no more blogs are available.

Also we can use lazy loading. Using lazy loading will enhance performance by reducing initial load times and conserving bandwidth. It will also improve memory usage, making the application more responsive and efficient, especially for users on lower-end devices or with limited internet speed. Lazy loading ensures a seamless user experience by loading content incrementally as needed.

Please let me know which approach you want and can I start working on this issue. also your views on using lazy loading. @aadeshkulkarni

[aadeshkulkarni]

@Kunall-singh -Infinite scrolling has already been implemented (refer issue: #95) and it is working seamlessly at the moment.

As part of this issue, the only enhancement needed is to add a message if user reaches the end of the scroll. That's it.

[Kunall-singh]

I apologize for the misunderstanding regarding the enhancement. Here is a prototype of what I have done so far to achieve this enhancement. You can see the details in the attached video.

Also, please let me know if the confetti effect looks subtle or if any adjustments are needed.

https://github.com/aadeshkulkarni/medium-app/assets/107796595/7a35b578-f299-49e3-a3c8-0c683214aa2b

[aadeshkulkarni]

Looks good. Please raise a PR, linking this issue to it.