an appview-less Bluesky client using Constellation and PDS Queries reddwarf.app
frontend spa bluesky reddwarf microcosm

possible scroll fix

rimar1337 44b8e6c2 9f8a63c5

Changed files
+27 -36
src
routes
profile.$did
+27 -36
src/routes/profile.$did/post.$rkey.tsx
··· 40 did, 41 rkey, 42 nopics, 43 - lightboxCallback 44 }: { 45 did: string; 46 rkey: string; 47 nopics?: boolean; 48 - lightboxCallback?: (d:LightboxProps) => void; 49 }) { 50 //const { get, set } = usePersistentStore(); 51 const queryClient = useQueryClient(); ··· 260 replyAturis.unshift(oldestOpsReply); 261 } 262 263 - 264 const [parents, setParents] = React.useState<any[]>([]); 265 const [parentsLoading, setParentsLoading] = React.useState(false); 266 267 const mainPostRef = React.useRef<HTMLDivElement>(null); 268 - const userHasScrolled = React.useRef(false); 269 270 - const scrollAnchor = React.useRef<{ top: number } | null>(null); 271 272 - React.useEffect(() => { 273 - const onScroll = () => { 274 - if (window.scrollY > 50) { 275 - userHasScrolled.current = true; 276 277 - window.removeEventListener("scroll", onScroll); 278 } 279 - }; 280 - 281 - if (!userHasScrolled.current) { 282 - window.addEventListener("scroll", onScroll, { passive: true }); 283 } 284 - return () => window.removeEventListener("scroll", onScroll); 285 - }, []); 286 287 - useLayoutEffect(() => { 288 - if (parentsLoading && mainPostRef.current && !userHasScrolled.current) { 289 - scrollAnchor.current = { 290 - top: mainPostRef.current.getBoundingClientRect().top, 291 - }; 292 } 293 - }, [parentsLoading]); 294 295 - useLayoutEffect(() => { 296 - if ( 297 - scrollAnchor.current && 298 - mainPostRef.current && 299 - !userHasScrolled.current 300 - ) { 301 - const newTop = mainPostRef.current.getBoundingClientRect().top; 302 - const topDiff = newTop - scrollAnchor.current.top; 303 - if (topDiff > 0) { 304 - window.scrollBy(0, topDiff); 305 - } 306 - scrollAnchor.current = null; 307 } 308 - }, [parents]); 309 310 React.useEffect(() => { 311 if (!mainPost?.value?.reply?.parent?.uri) { ··· 407 //margin: "0px auto 0", 408 padding: 0, 409 minHeight: "80dvh", 410 - paddingBottom: "20dvh" 411 }} 412 > 413 <div
··· 40 did, 41 rkey, 42 nopics, 43 + lightboxCallback, 44 }: { 45 did: string; 46 rkey: string; 47 nopics?: boolean; 48 + lightboxCallback?: (d: LightboxProps) => void; 49 }) { 50 //const { get, set } = usePersistentStore(); 51 const queryClient = useQueryClient(); ··· 260 replyAturis.unshift(oldestOpsReply); 261 } 262 263 const [parents, setParents] = React.useState<any[]>([]); 264 const [parentsLoading, setParentsLoading] = React.useState(false); 265 266 const mainPostRef = React.useRef<HTMLDivElement>(null); 267 + const hasPerformedInitialLayout = React.useRef(false); 268 + 269 + const [layoutReady, setLayoutReady] = React.useState(false); 270 + 271 + useLayoutEffect(() => { 272 + if (parents.length > 0 && !layoutReady && mainPostRef.current) { 273 + const mainPostElement = mainPostRef.current; 274 + 275 + if (window.scrollY === 0 && !hasPerformedInitialLayout.current) { 276 + const elementTop = mainPostElement.getBoundingClientRect().top; 277 + const headerOffset = 70; 278 279 + const targetScrollY = elementTop - headerOffset; 280 281 + window.scrollBy(0, targetScrollY); 282 283 + hasPerformedInitialLayout.current = true; 284 } 285 + // todo idk what to do with this 286 + setLayoutReady(true); 287 } 288 + }, [parents, layoutReady]); 289 290 + React.useEffect(() => { 291 + if (parentsLoading) { 292 + setLayoutReady(false); 293 } 294 295 + if (!mainPost?.value?.reply?.parent?.uri && !parentsLoading) { 296 + setLayoutReady(true); 297 + hasPerformedInitialLayout.current = true; 298 } 299 + }, [parentsLoading, mainPost]); 300 301 React.useEffect(() => { 302 if (!mainPost?.value?.reply?.parent?.uri) { ··· 398 //margin: "0px auto 0", 399 padding: 0, 400 minHeight: "80dvh", 401 + paddingBottom: "20dvh", 402 }} 403 > 404 <div