mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 10:45:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add pagination mechanism to SpaceHierarchy based on IntersectionObserver

Browse source
This commit is contained in:
Michael Telatynski 2021-07-30 11:02:05 +01:00
parent 259627fba2
commit f4ed9aeef1
1 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/structures/SpaceHierarchy.tsx
View file

@ -377,7 +377,7 @@ const SpaceHierarchy = ({
const [selected, setSelected] = useState(new Map<string, Set<string>>()); // Map<parentId, Set<childId>>
const { loading, rooms, hierarchy } = useSpaceSummary(space);
const { loading, rooms, hierarchy, loadMore } = useSpaceSummary(space);
const filteredRoomSet = useMemo<Set<IHierarchyRoom>>(() => {
if (!rooms.length) return new Set();
@ -408,6 +408,29 @@ const SpaceHierarchy = ({
const [removing, setRemoving] = useState(false);
const [saving, setSaving] = useState(false);
const handleObserver = (entries: IntersectionObserverEntry[]) => {
const target = entries[0];
if (target.isIntersecting) {
loadMore();
}
};
const observerRef = useRef<IntersectionObserver>();
const loaderRef = (element: HTMLDivElement) => {
if (observerRef.current) {
observerRef.current.disconnect();
} else if (element) {
observerRef.current = new IntersectionObserver(handleObserver, {
root: element.parentElement,
rootMargin: "0px 0px 600px 0px",
});
}
if (observerRef.current && element) {
observerRef.current.observe(element);
}
};
if (!loading && hierarchy.noSupport) {
return <p>{ _t("Your server does not support showing space hierarchies.") }</p>;
}
@ -542,6 +565,10 @@ const SpaceHierarchy = ({
}}
/>
</>;
loader = <div ref={loaderRef}>
<Spinner />
</div>;
} else {
results = <div className="mx_SpaceHierarchy_noResults">
<h3>{ _t("No results found") }</h3>