fix(PM-1448): implemented client side infinite scroll #1131
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -17,6 +17,9 @@ import styles from './SearchResultsPage.module.scss' | |||
| const SearchResultsPage: FC = () => { | |||
| const [showSkillsModal, setShowSkillsModal] = useState(false) | |||
|
|
|||
| const [currentPage, setCurrentPage] = useState(1) | |||
| const itemsPerPage = 10 | |||
There was a problem hiding this comment.
Consider making itemsPerPage a constant outside of the component if it does not change, to avoid re-declaring it on every render.
| @@ -25,6 +28,30 @@ const SearchResultsPage: FC = () => { | |||
| hasNext, | |||
There was a problem hiding this comment.
Typo in InfiniteTalentMatchesResposne, it should be InfiniteTalentMatchesResponse.
| const visibleHeight = window.innerHeight | ||
| const fullHeight = document.body.scrollHeight | ||
|
|
||
| if (scrollY + visibleHeight >= fullHeight - 100) { |
There was a problem hiding this comment.
Consider adding a debounce or throttle mechanism to the scroll event handler to improve performance and prevent excessive function calls during rapid scrolling.
src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
Outdated
Show resolved
Hide resolved
src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
Outdated
Show resolved
Hide resolved
| const visibleHeight = window.innerHeight | ||
| const fullHeight = document.body.scrollHeight | ||
| const footerElem = document.getElementById("footer-nav-el"); | ||
| const footerHeight = footerElem && footerElem.offsetHeight || 650; |
There was a problem hiding this comment.
Consider using optional chaining when accessing footerElem.offsetHeight to avoid potential runtime errors if footerElem is null. For example: const footerHeight = footerElem?.offsetHeight || 650;
| const fullHeight = document.body.scrollHeight | ||
| const footerElem = document.getElementById("footer-nav-el"); | ||
| const footerHeight = footerElem && footerElem.offsetHeight || 650; | ||
| if (scrollY + visibleHeight >= fullHeight - footerHeight + 100) { |
There was a problem hiding this comment.
The condition scrollY + visibleHeight >= fullHeight - footerHeight + 100 seems to have a logic change from the original. Ensure that the + 100 adjustment is intentional and correctly accounts for the desired scroll threshold.
src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx
Show resolved
Hide resolved
Related JIRA Ticket:
https://topcoder.atlassian.net/browse/PM-1448
What's in this PR?