xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: picture waterfall item height calculation on first render 

Fix issue where picture items in waterfall view had incorrect heights on first render due to timing issues with dimension loading. Changed stableRadio calculation to use useMemo and added proper fallback for initial render.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DIYgod 2025-07-18 19:29:25 +08:00
parent 0e456d5b73
commit 82a3537f86
No known key found for this signature in database
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/desktop/layer/renderer/src/modules/entry-column/Items/picture-item.tsx
View File

@ -149,25 +149,29 @@ const MasonryItemFixedDimensionWrapper = (
const dim = useImageDimensions(url)
const itemWidth = useMasonryItemWidth()
const itemHeight = dim ? itemWidth / dim.ratio : itemWidth
const stableRadio = useState(() => itemWidth / itemHeight || 1)[0]
const stableRadio = useMemo(() => {
return dim ? dim.ratio : 1
}, [dim])
const setItemStableRatio = useSetStableMasonryItemRatio()
const stableRadioCtx = useMasonryItemRatio(url)
useEffect(() => {
setItemStableRatio(url, stableRadio)
}, [setItemStableRatio, stableRadio, url])
if (dim) {
setItemStableRatio(url, stableRadio)
}
}, [setItemStableRatio, stableRadio, url, dim])
const finalRatio = stableRadioCtx || stableRadio
const style = useMemo(
() => ({
width: itemWidth,
height: itemWidth / stableRadioCtx! + 60,
height: itemWidth / finalRatio + 60,
}),
[itemWidth, stableRadioCtx],
[itemWidth, finalRatio],
)
if (!style.height) return null
if (!style.height || style.height === Infinity) return null
return (
<div className="relative flex h-full flex-col overflow-x-auto overflow-y-hidden" style={style}>