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

improve performance by avoiding some big re-renders (#1087)

Browse Source
This commit is contained in:
Athou
2025-05-26 20:53:11 +02:00
parent 91857c4d73
commit c7cec464aa
3 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
commafeed-client/src/App.tsx
View File

@@ -143,11 +143,15 @@ function GoogleAnalyticsHandler() {
return null return null
} }
function UnreadCountTitleHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) { function UnreadCountTitleHandler({ enabled }: { enabled?: boolean }) {
const root = useAppSelector(state => state.tree.rootCategory)
const unreadCount = categoryUnreadCount(root)
return <title>{enabled && unreadCount > 0 ? `(${unreadCount}) CommaFeed` : "CommaFeed"}</title> return <title>{enabled && unreadCount > 0 ? `(${unreadCount}) CommaFeed` : "CommaFeed"}</title>
} }
function UnreadCountFaviconHandler({ unreadCount, enabled }: { unreadCount: number; enabled?: boolean }) { function UnreadCountFaviconHandler({ enabled }: { enabled?: boolean }) {
const root = useAppSelector(state => state.tree.rootCategory)
const unreadCount = categoryUnreadCount(root)
useEffect(() => { useEffect(() => {
if (enabled && unreadCount > 0) { if (enabled && unreadCount > 0) {
Tinycon.setBubble(unreadCount) Tinycon.setBubble(unreadCount)
@@ -205,13 +209,10 @@ function CustomCssHandler() {
export function App() { export function App() {
useI18n() useI18n()
const root = useAppSelector(state => state.tree.rootCategory)
const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle) const unreadCountTitle = useAppSelector(state => state.user.settings?.unreadCountTitle)
const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon) const unreadCountFavicon = useAppSelector(state => state.user.settings?.unreadCountFavicon)
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const unreadCount = categoryUnreadCount(root)
useEffect(() => { useEffect(() => {
dispatch(reloadServerInfos()) dispatch(reloadServerInfos())
}, [dispatch]) }, [dispatch])
@@ -219,8 +220,8 @@ export function App() {
return ( return (
<Providers> <Providers>
<> <>
<UnreadCountTitleHandler unreadCount={unreadCount} enabled={unreadCountTitle} /> <UnreadCountTitleHandler enabled={unreadCountTitle} />
<UnreadCountFaviconHandler unreadCount={unreadCount} enabled={unreadCountFavicon} /> <UnreadCountFaviconHandler enabled={unreadCountFavicon} />
<BrowserExtensionBadgeUnreadCountHandler /> <BrowserExtensionBadgeUnreadCountHandler />
<CustomJsHandler /> <CustomJsHandler />
<CustomCssHandler /> <CustomCssHandler />

16
commafeed-client/src/hooks/useAppLoading.ts
View File

@@ -8,28 +8,28 @@ interface Step {
} }
export const useAppLoading = () => { export const useAppLoading = () => {
const profile = useAppSelector(state => state.user.profile) const profileLoaded = useAppSelector(state => !!state.user.profile)
const settings = useAppSelector(state => state.user.settings) const settingsLoaded = useAppSelector(state => !!state.user.settings)
const rootCategory = useAppSelector(state => state.tree.rootCategory) const rootCategoryLoaded = useAppSelector(state => !!state.tree.rootCategory)
const tags = useAppSelector(state => state.user.tags) const tagsLoaded = useAppSelector(state => !!state.user.tags)
const { _ } = useLingui() const { _ } = useLingui()
const steps: Step[] = [ const steps: Step[] = [
{ {
label: _(msg`Loading settings...`), label: _(msg`Loading settings...`),
done: !!settings, done: settingsLoaded,
}, },
{ {
label: _(msg`Loading profile...`), label: _(msg`Loading profile...`),
done: !!profile, done: profileLoaded,
}, },
{ {
label: _(msg`Loading subscriptions...`), label: _(msg`Loading subscriptions...`),
done: !!rootCategory, done: rootCategoryLoaded,
}, },
{ {
label: _(msg`Loading tags...`), label: _(msg`Loading tags...`),
done: !!tags, done: tagsLoaded,
}, },
] ]

5
commafeed-client/src/pages/app/FeedEntriesPage.tsx
View File

@@ -42,7 +42,9 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
const { id = Constants.categories.all.id } = useParams() const { id = Constants.categories.all.id } = useParams()
const viewport = useViewportSize() const viewport = useViewportSize()
const theme = useMantineTheme() const theme = useMantineTheme()
const rootCategory = useAppSelector(state => state.tree.rootCategory) const noSubscriptions = useAppSelector(
state => state.tree.rootCategory && flattenCategoryTree(state.tree.rootCategory).every(c => c.feeds.length === 0)
)
const sourceLabel = useAppSelector(state => state.entries.sourceLabel) const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl) const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl)
const hasMore = useAppSelector(state => state.entries.hasMore) const hasMore = useAppSelector(state => state.entries.hasMore)
@@ -83,7 +85,6 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
return () => promise.abort() return () => promise.abort()
}, [dispatch, props.sourceType, id, location.state?.timestamp]) }, [dispatch, props.sourceType, id, location.state?.timestamp])
const noSubscriptions = rootCategory && flattenCategoryTree(rootCategory).every(c => c.feeds.length === 0)
if (noSubscriptions) return <NoSubscriptionHelp /> if (noSubscriptions) return <NoSubscriptionHelp />
return ( return (
// add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding // add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding