Make it possible to lazy load unpadded urls

brave · Oct 21, 2022 · 1736b4b · 1736b4b
1 parent bc59f72
commit 1736b4b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/Configure.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/Configure.tsx
@@ -114,7 +114,7 @@ export default function Configure () {
   }
 
   return (
-    <Grid>
+    <Grid id='brave-news-configure'>
       <BackButtonContainer>
         <Button onClick={() => setCustomizePage(null)}>
           {BackArrow}

diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/FeedCard.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/FeedCard.tsx
@@ -11,7 +11,7 @@ import Flex from '../../../Flex'
 import FollowButton from './FollowButton'
 import { getCardColor } from './colors'
 import { usePublisher, usePublisherFollowed } from './Context'
-import { useUnpaddedImageUrl } from '../useUnpaddedImageUrl'
+import { useLazyUnpaddedImageUrl } from '../useUnpaddedImageUrl'
 
 interface CardProps {
   backgroundColor?: string
@@ -63,8 +63,13 @@ export default function FeedCard (props: {
   const { followed, setFollowed } = usePublisherFollowed(props.publisherId)
 
   const backgroundColor = publisher.backgroundColor || getCardColor(publisher.feedSource?.url || publisher.publisherId)
-  const coverUrl = useUnpaddedImageUrl(publisher.coverUrl?.url, undefined, /* useCache= */true)
-  return <Flex direction="column" gap={8}>
+  const { url: coverUrl, elementRef } = useLazyUnpaddedImageUrl(publisher.coverUrl?.url, {
+    rootElement: document.getElementById('brave-news-container')!,
+    rootMargin: '0px 0px 200px 0px',
+    useCache: true
+  })
+
+  return <Flex direction="column" gap={8} ref={elementRef}>
     <Card backgroundColor={backgroundColor} data-feed-card-is-followed={followed}>
       {coverUrl && <CoverImage backgroundImage={coverUrl} />}
       <StyledFollowButton following={followed} onClick={() => setFollowed(!followed)} />

diff --git a/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts b/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
@@ -6,6 +6,15 @@
 import * as React from 'react'
 import getBraveNewsController from '../../../api/brave_news'
 
+interface Options {
+  rootElement?: HTMLElement
+  rootMargin?: string
+  threshold?: number
+
+  useCache?: boolean
+  onLoaded?: () => any
+}
+
 const cache: { [url: string]: string } = {}
 export function useUnpaddedImageUrl (paddedUrl: string | undefined, onLoaded?: () => any, useCache?: boolean) {
   const [unpaddedUrl, setUnpaddedUrl] = React.useState('')
@@ -56,3 +65,33 @@ export function useUnpaddedImageUrl (paddedUrl: string | undefined, onLoaded?: (
   }, [paddedUrl])
   return unpaddedUrl
 }
+
+export function useLazyUnpaddedImageUrl (paddedUrl: string | undefined, options: Options) {
+  const [visible, setVisible] = React.useState(false)
+  const [elementRef, setElementRef] = React.useState<HTMLElement | null>(null)
+
+  React.useEffect(() => {
+    if (!elementRef) return
+
+    const observer = new IntersectionObserver(([intersectionInfo]) => {
+      if (!intersectionInfo.isIntersecting) {
+        return
+      }
+      setVisible(true)
+    }, {
+      root: options.rootElement,
+      rootMargin: options.rootMargin,
+      threshold: options.threshold
+    })
+
+  observer.observe(elementRef)
+    return () => {
+      observer.disconnect()
+    }
+  }, [options.rootElement, elementRef])
+
+  return {
+    url: useUnpaddedImageUrl(visible ? paddedUrl : undefined, options.onLoaded, options.useCache) || cache[paddedUrl!],
+    elementRef: setElementRef
+  }
+}