Masonry code takes too long to open
I code for masonry but it takes too long to open. I think this code have more calculations to run like height. is it have optimized code? The main problem is masonry creates all HTML elements in the beginning and gets heights.
import { createMasonry } from "@solid-primitives/masonry";
import { createBreakpoints } from "@solid-primitives/media";
import { createElementSize } from "@solid-primitives/resize-observer";
const [postHeights, setPostHeights] = createSignal({});
const WrappedPost = (props) => {
let target;
const size = createElementSize(() => target);
createEffect(() => {
setPostHeights((prev) => ({ ...prev, [props.params.id]: size.height }));
});
return (
<div ref={(el) => (target = el)}>
<UserPost params={props.params} />
</div>
);
};
const [Postslist, setPostslist] = createSignal([]);
createEffect(() => {
const heights = postHeights();
setPostslist(
posts.map((item) => ({
id: item.id,
content: <WrappedPost params={item} />,
height: () => heights[item.id] || 0,
}))
);
});
const br = createBreakpoints({
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
});
const gap = 10;
const masonry = createMasonry({
source: Postslist,
columns: () => (br.xl ? 3 : br.lg ? 4 : br.md ? 3 : br.sm ? 2 : 1),
mapHeight: (item) => () => item.height() + gap,
mapElement: (item) => (
<div
style={{
height: `${item.source.height() + item.margin()}px`,
order: item.order(),
}}
>
<div>{item.source.content}</div>
</div>
),
});
import { createMasonry } from "@solid-primitives/masonry";
import { createBreakpoints } from "@solid-primitives/media";
import { createElementSize } from "@solid-primitives/resize-observer";
const [postHeights, setPostHeights] = createSignal({});
const WrappedPost = (props) => {
let target;
const size = createElementSize(() => target);
createEffect(() => {
setPostHeights((prev) => ({ ...prev, [props.params.id]: size.height }));
});
return (
<div ref={(el) => (target = el)}>
<UserPost params={props.params} />
</div>
);
};
const [Postslist, setPostslist] = createSignal([]);
createEffect(() => {
const heights = postHeights();
setPostslist(
posts.map((item) => ({
id: item.id,
content: <WrappedPost params={item} />,
height: () => heights[item.id] || 0,
}))
);
});
const br = createBreakpoints({
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
});
const gap = 10;
const masonry = createMasonry({
source: Postslist,
columns: () => (br.xl ? 3 : br.lg ? 4 : br.md ? 3 : br.sm ? 2 : 1),
mapHeight: (item) => () => item.height() + gap,
mapElement: (item) => (
<div
style={{
height: `${item.source.height() + item.margin()}px`,
order: item.order(),
}}
>
<div>{item.source.content}</div>
</div>
),
});
0 Replies