Please remove the unnecessary animation that locked up a tab here for several seconds.
Aside from the lag, I was hoping folks might appreciate the artistic of the animations where companies are resolving around a remote coding home :)
You can render tens of thousands of rows at once without lag, something is wrong.
Below are more details--- Issue 1. Table with a link overlay in every cell I initially used an off shelf table component to move fast and didn't take a closer look at the implementation. It turned out this component renders a link overlay in every cell to allow user to click table row to be taken to the job link. So 400 jobs with 6 rows end up rendering 2400 link overlays.
The reason it attaches a link overlay to a cell instead of a row is due to a well known bug with Safari, where you can't use `position: relative` in table row `tr` https://bugs.webkit.org/show_bug.cgi?id=240961. Attaching it to each cell works for small number of rows but causes performance issues with large number of rows.
I fixed it by rolling out my own table with css grid instead. It is not as semantic as it no longer uses table, thead, th, tr, td, but thanks to Safari, it is a tradeoff I am okay with.
Bug 2. Unnecessary re-render on Zustand store rehydrate I used Zustand store to filters preference and save it to browser's local storage. On page load, it fetches from local storage to update the state or store rehydrate . I didn't use shallow comparison initially and caused the table to render even if the prev and new state is an empty array due to comparison by reference. Using shallow comparison minimize an uncessary render.
Kudos to you, I’m sure my 2012 mbp will handle it fine though :-)
I shared the root cause in a sibling comment and am forwarding it here: Below are more details---
Issue 1. Table with a link overlay in every cell I initially used an off shelf table component to move fast and didn't take a closer look at the implementation. It turned out this component renders a link overlay in every cell to allow user to click table row to be taken to the job link. So 400 jobs with 6 rows end up rendering 2400 link overlays.
The reason it attaches a link overlay to a cell instead of a row is due to a well known bug with Safari, where you can't use `position: relative` in table row `tr` https://bugs.webkit.org/show_bug.cgi?id=240961. Attaching it to each cell works for small number of rows but causes performance issues with large number of rows.
I fixed it by rolling out my own table with css grid instead. It is not as semantic as it no longer uses table, thead, th, tr, td, but thanks to Safari, it is a tradeoff I am okay with.
Bug 2. Unnecessary re-render on Zustand store rehydrate I used Zustand store to filters preference and save it to browser's local storage. On page load, it fetches from local storage to update the state or store rehydrate . I didn't use shallow comparison initially and caused the table to render even if the prev and new state is an empty array due to comparison by reference. Using shallow comparison minimize an unnecessary render.
As to the other, I never appreciate animations or scrolling hijinks on a website. It makes it harder to use and slows it down. But,I'm a grouchy old fucker.
The animation stops because it gets blocked due to an issue with the table taking too long to render.
The animation stops because it gets blocked and appears to be locked up due to an issue with the table taking too long to render and another bug causing the table to re-render again.