jaredLunde / jaredLunde/masonic
LayoutShift occurs when using useInfiniteLoader
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
LayoutShift occurs when using useInfiniteLoader.
During the virtualization function, the redrawing of elements is recalculating the position as items are added, and we suspect that this position calculation is causing a layout shift.
**To Reproduce**
Steps to reproduce the behavior:
1. go to [useInfiniteLoader example](https://codesandbox.io/p/sandbox/useinfiniteloader-example-vn30p?file=/src/index.js:37,5)
2. scroll down so that the content is fully loaded
3. As you scroll up and down, you can see that the layout shifts column by column
Contributor guide
Research direction
Start with the linked useInfiniteLoader CodeSandbox and reproduce the issue by scrolling until the content is fully loaded, then scrolling up and down. Investigate the virtualization redraw and position recalculation described in the report; done means the column-by-column layout shift no longer occurs during scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100