From 1736b4b7ab27186c6cf3d3c2056b0db6161cb975 Mon Sep 17 00:00:00 2001
From: Jay Harris <jay.harris@outlook.co.nz>
Date: Fri, 21 Oct 2022 14:03:29 +1300
Subject: [PATCH] Make it possible to lazy load unpadded urls

---
 .../braveToday/customize/Configure.tsx        |  2 +-
 .../default/braveToday/customize/FeedCard.tsx | 11 ++++--
 .../default/braveToday/useUnpaddedImageUrl.ts | 39 +++++++++++++++++++
 3 files changed, 48 insertions(+), 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
index 3bb4a27dd616..08cb38664701 100644
--- 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
index d1e1ebfad334..77ff60a59959 100644
--- 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
index 1a42dd2614d1..92b2150bdd1f 100644
--- 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
+  }
+}