Fix pagination bug #120
Fix pagination bug #120
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
the first two commits smash this issue #98 |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #120 +/- ##
==========================================
- Coverage 50.48% 49.82% -0.66%
==========================================
Files 39 40 +1
Lines 1141 1142 +1
Branches 152 149 -3
==========================================
- Hits 576 569 -7
- Misses 565 573 +8 ☔ View full report in Codecov by Sentry. |
| @@ -20,7 +17,24 @@ type PostProps = { | |||
| // homepage posts( recent) posts of users | |||
| export const HomePost: React.FC<PostProps> = ({ laptimes, fetchMoreData, hasMore }) => { | |||
|
|
|||
| const { laptime_loading } = useLaptimes(); | |||
| // intersection observation api instead of the bad infinite scroll component | |||
There was a problem hiding this comment.
I resolved the bug by removing the InfiniteScroll component (an external library) from Post.tsx and replacing it with a custom Intersection Observer method to load more data. This approach is more efficient and reliable.
The InfiniteScroll component has a flaw: it requires additional pixels beyond the viewport height to trigger the loading of more data. This means that if you restrict the parent Flex component to 100vh, the component won't work correctly. For example:
<Flex height='100vh'> <InfiniteScroll /> </Flex>
In this scenario, the height must be greater than 100vh for the component to function properly. It's unclear how many extra pixels are needed to reach the 'end' of the page, making it impractical when you want to restrict the page height to 100vh and keep it in place.
By using a custom Intersection Observer method, I was able to achieve a more seamless and predictable infinite scrolling experience.
|
I couldnt figure out how the new LiteYouTubeEmbed really works during render, so I will update the test for the misFunctions later. Using this new component helped fixes the bug where the iframe was always re-rendering and causing flickering issue while scrolling. |
No description provided.