-
{{[[DONE]]}} (hidden) kZ4pi0r6u [[(hidden) lf_Nd8Mic]] [[(hidden) i9tU5xFDv]] #watch
-
(hidden) 0zMtqvTHo
-
{{[[TODO]]}} (hidden) Uj-IXwNwA #[[(hidden) -VnoIOF8r]]
-
(hidden) z5ltkpF4F [[(hidden) j918V1ZOD]] [[(hidden) ote4EHffu]] #[[(hidden) S-ygYfi0j]] [[(hidden) H-l0kcZv0]]
-
(hidden) 1BpAGrssg #bs
-
(hidden) t_UmatYAh [[(hidden) ote4EHffu]] #observation
-
(hidden) AJJ2bXcG_
-
-
(hidden) lnrvJ0XQX
-
-
(hidden) wQJYEvRNJ
-
-
(hidden) 8X3d9fJ-T
-
-
(hidden) -wbMGRsYz
-
(hidden) YOk_nWUVc
-
{{[[TODO]]}} (hidden) LCCPNHvij #explore [[(hidden) ASJLChN99]]
-
(hidden) 8w7MAE4LF
-
(hidden) VqMAdRopT
-
[[git-stacked-rebase]]
-
(hidden) LC0n0jgP1
-
(hidden) 6AqhVRMyM
-
(hidden) BairI4i7e #[[(hidden) GsGCuofgC]] #[[(hidden) 5TkbUFA6W]]
-
(hidden) GYk7uLQ09
-
(hidden) JklzXejZz
-
(hidden) iPHvbjest #[[(hidden) S-ygYfi0j]]
-
(hidden) xM20kYy7o [[(hidden) Ib9bzxQxj]]
-
{{[[DONE]]}} (hidden) v1a0AFdjb [[(hidden) UbrBiwJcK]]
-
(hidden) tHufJLKyk
-
(hidden) 5l9j6U4J- [[(hidden) ijQyN1019]] [[(hidden) Ihl0M8aWF]]
-
{{[[DONE]]}} (hidden) zAusE1ZDV [[(hidden) AEThLPcJI]]
-
(hidden) 0soKwq4St
-
(hidden) LXLG7YCoe [[infinite scroll/pagination]]
-
{{[[DONE]]}} #public "kanban infinite scroll by each column" w/ `react-query` & `react-intersection-observer`
-
{{[[TODO]]}} debug `inView` bug (`no_activities` different behavior)
-
{{[[DONE]]}} `triggerOnce` performance
-
decided to use `InView` (HOC) instead, + do everything inside the Card item itself -- pass in `isLast` and `fetchMoreData` props
-
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> )}```
-
-
-
(hidden) kQdwWzQum
-
-
-
(hidden) e7vAZxfme
-
-
(hidden) Toc3BC3By
-
-
(hidden) 0ize5ja4k
-
(hidden) xTTv0QeKY
-
(hidden) GSR7RFihm
-
{{[[TODO]]}} (hidden) HAGGIbENi [[(hidden) _3AoBLsoF]] #read
-
(hidden) IBRi4FTLM
-
(hidden) yxQT2475u
-
(hidden) ox_ARFIJo
-
(hidden) ticy70Pmt
-
(hidden) W8YFUasJJ
-
(hidden) VXxNoBCG9
-
(hidden) qbj0Fn39g
-
(hidden) iRt44vuK7
-
(hidden) p1AKzCTgw
-
(hidden) s_44-JiGM
-
(hidden) Wdohs0kwf
-
(hidden) RV3KCRt_C
-
(hidden) 4wbMM2xnn