June 9th, 2022

(hidden) 8Ub0oOWIL [[(hidden) pHco5hQZn]] #[[(hidden) 7c2C8PgIV]] [[(hidden) 0-RPzbB56]]

(hidden) 6AZ5SzhEF

(hidden) 7vOtQOPBz [[(hidden) 1emn3OovN]] #observation

(hidden) vNcBzzEQX

(hidden) But_izB5N

(hidden) mowkagqU1 [[(hidden) LniT2eB9x]]

(hidden) 8ml2arHVE

(hidden) owIxW1bkT

(hidden) YoOSbinwi

works because `isLast` changes on next fetch, so the old `InView` gets removed and a new one gets rendered, so no matter how tall your `ElementInView` is, if there's more data, it'll keep getting fetched, until there's enough items so that your `ElementInView` is no longer visible (until you scroll into it again)

```javascript import styled from '@emotion/styled'; export const ElementInViewParent = styled.div` display: flex; flex-direction: column; position: relative; `; export const ElementInView = styled.div` position: absolute; /** * instead of "bottom: 100vh", we do "bottom: 0" and "top: -100vh", * so that the "height: auto" will make the element full of height, * starting from the top position (100vh from the bottom), * up until the very bottom. * * if we didn't do this (1st option), the height would be 0. * */ /* bottom: 100vh; */ bottom: 0; /* top: -100vh; */ top: -1000vh; /** * * fetch 10x earlier. * * for this to work, you need to make sure that * even if you fetch very few items (but there are more) * (i.e. the pagination limit is very small, e.g. 10), * the 'ElementInView' will get re-rendered properly, * * so that even if the first 10, 20, or say 50 items * are not enough to put the 'ElementInView' deep enough * to make the 'ElementInView' invisible, * you will still keep fetching more data * by re-rendering the element (thus it disappears & re-appears), * until it is actually hidden. * * in our case, we achieve this by rendering the 'ElementInView' * in the 'BoardCard' (i.e. individual item) itself, * _not_ in a 'BoardColumn'. * for this, we pass in the 'isLast' prop * so that only the last item renders the element, * and ofc the 'fetchMoreData' prop too. * * overall, this helps achieve optimal performance with intersection observer, * because with the 'react-intersection-observer' lib, we can now set the 'triggerOnce' * prop to 'true', meaning it won't keep polling * (internally, it unsubscribes the intersection observer -- this is why * the re-render is needed). * * --- * * additional sidenote: 'react-intersection-observer' lib was buggy with it's 'useInView' hook * in multiple occasions: * 1. when used with 'triggerOnce', it'd slow down, but still would keep triggering; * 2. if you used their 'onChange' instead of using 'inView' with a 'useEffect', * the onChange would run insanely much, probably every X milliseconds. * the 'triggerOnce' didn't have any effect for it either. * * i suspect this is because the 'inView' goes thru React's 'setState', * and it could get limited/batched, meanwhile the 'onChange' would get * called directly, thus spamming a lot. * * * --- * * see the PR where we implemented this: * https://github.com/pipedrive/account-management-ui/pull/108 * (includes video showcasing the 1st above explained case) * */ width: 100%; height: auto; /** * INFINITE_SCROLL_DEBUG: * */ /* background-color: red; */ `; ```

```javascript {!isLast ? null : ( <ElementInViewParent> <InView triggerOnce={true} onChange={(inView) => { if (inView) { fetchNextPage(); } }} > {({ ref }) => <ElementInView ref={ref} />} </InView> </ElementInViewParent> )}```