garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

remove ScrollArea as it causes performance issues on chrome (#1087)

Browse Source
This commit is contained in:
Athou
2023-06-24 23:00:25 +02:00
parent 53b06f41f3
commit bdcfbc22bf
6 changed files with 26 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
commafeed-client/src/components/content/FeedEntries.tsx
View File

@@ -74,8 +74,6 @@ export function FeedEntries() {
const swipedRight = (entry: ExpendableEntry) => dispatch(markEntry({ entry, read: !entry.read }))
useEffect(() => {
const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
const listener = () => {
if (viewMode !== "expanded") return
if (scrollingToEntry) return
@@ -100,8 +98,8 @@ export function FeedEntries() {
}
}
const throttledListener = throttle(100, listener)
scrollArea?.addEventListener("scroll", throttledListener)
return () => scrollArea?.removeEventListener("scroll", throttledListener)
window.addEventListener("scroll", throttledListener)
return () => window.removeEventListener("scroll", throttledListener)
}, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
useMousetrap("r", () => dispatch(reloadEntries()))
@@ -154,9 +152,8 @@ export function FeedEntries() {
})
)
} else {
const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
scrollArea?.scrollTo({
top: scrollArea.scrollTop + scrollArea.clientHeight * 0.8,
window.scrollTo({
top: window.scrollY + document.documentElement.clientHeight * 0.8,
behavior: "smooth",
})
}
@@ -193,9 +190,8 @@ export function FeedEntries() {
})
)
} else {
const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
scrollArea?.scrollTo({
top: scrollArea.scrollTop - scrollArea.clientHeight * 0.8,
window.scrollTo({
top: window.scrollY - document.documentElement.clientHeight * 0.8,
behavior: "smooth",
})
}
@@ -267,8 +263,6 @@ export function FeedEntries() {
loadMore={() => dispatch(loadMoreEntries())}
hasMore={hasMore}
loader={<Loader key={0} />}
useWindow={false}
getScrollParent={() => document.getElementById(Constants.dom.mainScrollAreaId)}
>
{entries.map(entry => (
<div

7
commafeed-client/src/components/content/FeedEntryContextMenu.tsx
View File

@@ -1,6 +1,5 @@
import { Trans } from "@lingui/macro"
import { createStyles, Group } from "@mantine/core"
import { Constants } from "app/constants"
import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
import { redirectToFeed } from "app/slices/redirect"
import { useAppDispatch, useAppSelector } from "app/store"
@@ -117,13 +116,11 @@ export function useFeedEntryContextMenu(entry: Entry) {
// close context menu on scroll
useEffect(() => {
const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
const listener = () => contextMenu.hideAll()
const throttledListener = throttle(100, listener)
scrollArea?.addEventListener("scroll", throttledListener)
return () => scrollArea?.removeEventListener("scroll", throttledListener)
window.addEventListener("scroll", throttledListener)
return () => window.removeEventListener("scroll", throttledListener)
}, [contextMenu])
return { onContextMenu }