| 1 | import { useEffect, useRef } from "react"; |
| 2 | import { DiffFileHeaderSkeleton } from "../DiffPanelShell"; |
| 3 | |
| 4 | /** Load the next batch before the reader reaches the end of the current files. */ |
| 5 | export function DiffFileLoadingBoundary({ load, count }: { load: () => void; count: number }) { |
| 6 | const ref = useRef<HTMLDivElement>(null); |
| 7 | useEffect(() => { |
| 8 | if (!ref.current) return; |
| 9 | const observer = new IntersectionObserver( |
| 10 | (entries) => { |
| 11 | if (entries.some((entry) => entry.isIntersecting)) load(); |
| 12 | }, |
| 13 | { rootMargin: "600px" }, |
| 14 | ); |
| 15 | observer.observe(ref.current); |
| 16 | return () => observer.disconnect(); |
| 17 | }, [load]); |
| 18 | return ( |
| 19 | <div ref={ref} role="status" aria-label="Loading diff…"> |
| 20 | {Array.from({ length: Math.min(count, 4) }, (_, index) => ( |
| 21 | <div key={index} aria-hidden className="border-b border-border/40"> |
| 22 | <DiffFileHeaderSkeleton titleWidth="medium" /> |
| 23 | </div> |
| 24 | ))} |
| 25 | </div> |
| 26 | ); |
| 27 | } |