diff --git a/commafeed-client/src/components/content/Content.tsx b/commafeed-client/src/components/content/Content.tsx
index 1cb2c587..f243dd87 100644
--- a/commafeed-client/src/components/content/Content.tsx
+++ b/commafeed-client/src/components/content/Content.tsx
@@ -1,12 +1,13 @@
import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core"
import { Constants } from "app/constants"
-import { useAppSelector } from "app/store"
import { calculatePlaceholderSize } from "app/utils"
import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
import { ChildrenNode, Interweave, Matcher, MatchResponse, Node, TransformCallback } from "interweave"
+import React from "react"
export interface ContentProps {
content: string
+ highlight?: string
}
const useStyles = createStyles(theme => ({
@@ -82,10 +83,10 @@ class HighlightMatcher extends Matcher {
}
}
-export function Content(props: ContentProps) {
+// memoize component because Interweave is costly
+const Content = React.memo((props: ContentProps) => {
const { classes } = useStyles()
- const search = useAppSelector(state => state.entries.search)
- const matchers = search ? [new HighlightMatcher(search)] : []
+ const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : []
return (
@@ -94,4 +95,6 @@ export function Content(props: ContentProps) {
)
-}
+})
+
+export { Content }
diff --git a/commafeed-client/src/components/content/FeedEntryBody.tsx b/commafeed-client/src/components/content/FeedEntryBody.tsx
index 00d699f6..d22a5720 100644
--- a/commafeed-client/src/components/content/FeedEntryBody.tsx
+++ b/commafeed-client/src/components/content/FeedEntryBody.tsx
@@ -1,4 +1,5 @@
import { Box } from "@mantine/core"
+import { useAppSelector } from "app/store"
import { Entry } from "app/types"
import { Content } from "./Content"
import { Enclosure } from "./Enclosure"
@@ -9,10 +10,11 @@ export interface FeedEntryBodyProps {
}
export function FeedEntryBody(props: FeedEntryBodyProps) {
+ const search = useAppSelector(state => state.entries.search)
return (
-
+
{props.entry.enclosureType && props.entry.enclosureUrl && (