Skip to content

Commit

Permalink
Lazy load favicons
Browse files Browse the repository at this point in the history
  • Loading branch information
fallaciousreasoning committed Oct 21, 2022
1 parent 1736b4b commit 0fc1579
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function FeedCard (props: {

const backgroundColor = publisher.backgroundColor || getCardColor(publisher.feedSource?.url || publisher.publisherId)
const { url: coverUrl, elementRef } = useLazyUnpaddedImageUrl(publisher.coverUrl?.url, {
rootElement: document.getElementById('brave-news-container')!,
rootElement: document.getElementById('brave-news-configure'),
rootMargin: '0px 0px 200px 0px',
useCache: true
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import styled from 'styled-components'
import { getLocale } from '$web-common/locale'
import Flex from '../../../Flex'
import { useChannelSubscribed, usePublisher, usePublisherFollowed } from './Context'
import { useUnpaddedImageUrl } from '../useUnpaddedImageUrl'
import { useLazyUnpaddedImageUrl } from '../useUnpaddedImageUrl'

interface Props {
publisherId: string
Expand Down Expand Up @@ -60,9 +60,13 @@ const ChannelNameText = styled.span`
`

function FavIcon (props: { src?: string }) {
const url = useUnpaddedImageUrl(props.src, undefined, /* useCache= */true)
const { url, elementRef } = useLazyUnpaddedImageUrl(props.src, {
rootElement: document.getElementById('brave-news-configure'),
rootMargin: '0px 0px 100px 0px',
useCache: true
})
const [error, setError] = React.useState(false)
return <FavIconContainer>
return <FavIconContainer ref={elementRef}>
{url && !error && <img src={url} onError={() => setError(true)} />}
</FavIconContainer>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import * as React from 'react'
import getBraveNewsController from '../../../api/brave_news'

interface Options {
rootElement?: HTMLElement
rootElement?: HTMLElement | null
rootMargin?: string
threshold?: number

Expand Down

0 comments on commit 0fc1579

Please sign in to comment.