YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add lazy rendering in home page (#2085)

Browse Source
This commit is contained in:
boojack
2023-08-05 22:14:17 +08:00
committed by GitHub
parent 218159bf83
commit 7189ba40d3
2 changed files with 36 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/Memo.tsx
View File

@ -27,10 +27,11 @@ interface Props {
showFull?: boolean;
showVisibility?: boolean;
showRelatedMemos?: boolean;
lazyRendering?: boolean;
}
const Memo: React.FC<Props> = (props: Props) => {
const { memo, showCreator, showFull, showVisibility, showRelatedMemos } = props;
const { memo, showCreator, showFull, showVisibility, showRelatedMemos, lazyRendering } = props;
const { i18n } = useTranslation();
const t = useTranslate();
const filterStore = useFilterStore();
@ -38,6 +39,7 @@ const Memo: React.FC<Props> = (props: Props) => {
const memoStore = useMemoStore();
const memoCacheStore = useMemoCacheStore();
const userV1Store = useUserV1Store();
const [shouldRender, setShouldRender] = useState<boolean>(lazyRendering ? false : true);
const [createdTimeStr, setCreatedTimeStr] = useState<string>(getRelativeTimeString(memo.displayTs));
const [relatedMemoList, setRelatedMemoList] = useState<Memo[]>([]);
const memoContainerRef = useRef<HTMLDivElement>(null);
@ -77,6 +79,29 @@ const Memo: React.FC<Props> = (props: Props) => {
};
}, [i18n.language]);
// Lazy rendering.
useEffect(() => {
if (shouldRender) {
return;
}
const root = document.body.querySelector("#root");
if (root) {
const checkShouldRender = () => {
if (root.scrollTop + window.innerHeight > (memoContainerRef.current?.offsetTop || 0)) {
setShouldRender(true);
root.removeEventListener("scroll", checkShouldRender);
return true;
}
};
if (checkShouldRender()) {
return;
}
root.addEventListener("scroll", checkShouldRender);
}
}, [lazyRendering]);
const handleTogglePinMemoBtnClick = async () => {
try {
if (memo.pinned) {
@ -221,6 +246,15 @@ const Memo: React.FC<Props> = (props: Props) => {
}
};
if (!shouldRender) {
return (
<div
className={`memo-wrapper min-h-[128px] ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`}
ref={memoContainerRef}
></div>
);
}
return (
<>
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>