morten/refocus.dev
1
0
Fork 0
mirror of https://github.com/morten-olsen/refocus.dev.git synced 2026-02-08 00:46:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: improved render performance on masonry

Browse Source
This commit is contained in:
Morten Olsen
2023-06-16 14:34:51 +02:00
parent c11d5248ff
commit 6fceea9269
1 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/ui/src/base/masonry/index.tsx
View File

@@ -77,6 +77,16 @@ const Masonry = ({ children }: Props) => {
setColumnWidth(nextColumnWidth);
}, []);
const isInitialRender = useMemo(
() =>
!!(
columnWidth === 0 ||
heights.length !== elements.length ||
heights.find((height) => height === undefined)
),
[heights, elements, columnWidth],
);
useLayoutEffect(() => {
if (!ref.current) {
return;
@@ -91,17 +101,21 @@ const Masonry = ({ children }: Props) => {
}, [updateSize]);
const debouncedLayout = useDebounce(layout, 10);
const debouncedHeights = useDebounce(heights, 10);
return (
<div ref={ref}>
{elements.map((element, index) => (
{columnWidth > 0 &&
elements.map((element, index) => (
<ItemWrapper
style={{
width: debouncedLayout[index]?.width,
height: debouncedHeights[index],
}}
animate={{
animationDelay: `${index * 0.05}s`,
animationDuration: '0.1s',
animationDuration: isInitialRender ? '0s' : '0.1s',
transform: `translate(${debouncedLayout[index]?.x}px, ${debouncedLayout[index]?.y}px)`,
width: debouncedLayout[index]?.width,
height: heights[index],
}}
key={index}
>