From bc59f728fb524a5d4413df81a26742a0831ec73e Mon Sep 17 00:00:00 2001
From: Jay Harris <jay.harris@outlook.co.nz>
Date: Fri, 21 Oct 2022 12:11:31 +1300
Subject: [PATCH 1/4] Move hook to its own file

---
 .../default/braveToday/cards/CardImage.tsx    | 57 +-----------------
 .../default/braveToday/customize/FeedCard.tsx |  4 +-
 .../braveToday/customize/SourcesListEntry.tsx |  4 +-
 .../default/braveToday/useUnpaddedImageUrl.ts | 58 +++++++++++++++++++
 4 files changed, 65 insertions(+), 58 deletions(-)
 create mode 100644 components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts

diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/CardImage.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/CardImage.tsx
index 5686a3bf4cd6..9685c0c0e693 100644
--- a/components/brave_new_tab_ui/components/default/braveToday/cards/CardImage.tsx
+++ b/components/brave_new_tab_ui/components/default/braveToday/cards/CardImage.tsx
@@ -5,7 +5,8 @@
 
 import * as React from 'react'
 import * as Card from '../cardSizes'
-import getBraveNewsController, * as BraveNews from '../../../../api/brave_news'
+import * as BraveNews from '../../../../api/brave_news'
+import { useUnpaddedImageUrl } from '../useUnpaddedImageUrl'
 
 type Props = {
   imageUrl?: string
@@ -14,60 +15,8 @@ type Props = {
   onLoaded?: () => any
 }
 
-const cache: { [url: string]: string } = {}
-
-export function useGetUnpaddedImage (paddedUrl: string | undefined, onLoaded?: () => any, useCache?: boolean) {
-  const [unpaddedUrl, setUnpaddedUrl] = React.useState('')
-
-  React.useEffect(() => {
-    const onReceiveUnpaddedUrl = (result: string) => {
-      if (useCache) cache[paddedUrl!] = result
-      setUnpaddedUrl(result)
-
-      if (onLoaded) window.requestAnimationFrame(() => onLoaded())
-    }
-
-    // Storybook method
-    // @ts-expect-error
-    if (window.braveStorybookUnpadUrl) {
-      // @ts-expect-error
-      window.braveStorybookUnpadUrl(paddedUrl)
-        .then(onReceiveUnpaddedUrl)
-      return
-    }
-
-    if (!paddedUrl) return
-
-    if (cache[paddedUrl]) {
-      onReceiveUnpaddedUrl(cache[paddedUrl])
-      return
-    }
-
-    let blobUrl: string
-    getBraveNewsController().getImageData({ url: paddedUrl })
-      .then(async (result) => {
-        if (!result.imageData) {
-          return
-        }
-
-        const blob = new Blob([new Uint8Array(result.imageData)], { type: 'image/*' })
-        blobUrl = URL.createObjectURL(blob)
-        onReceiveUnpaddedUrl(blobUrl)
-      })
-      .catch(err => {
-        console.error(`Error getting image for ${paddedUrl}.`, err)
-      })
-
-      // Only revoke the URL if we aren't using the cache.
-      return () => {
-        if (!useCache) URL.revokeObjectURL(blobUrl)
-      }
-  }, [paddedUrl])
-  return unpaddedUrl
-}
-
 export default function CardImage (props: Props) {
-  const unpaddedUrl = useGetUnpaddedImage(props.imageUrl, props.onLoaded)
+  const unpaddedUrl = useUnpaddedImageUrl(props.imageUrl, props.onLoaded)
   const [isImageLoaded, setIsImageLoaded] = React.useState(false)
   React.useEffect(() => {
     if (unpaddedUrl) {
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 d4916e6f9f96..d1e1ebfad334 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
@@ -8,10 +8,10 @@ import * as React from 'react'
 import styled from 'styled-components'
 import { api } from '../../../../api/brave_news/news'
 import Flex from '../../../Flex'
-import { useGetUnpaddedImage } from '../cards/CardImage'
 import FollowButton from './FollowButton'
 import { getCardColor } from './colors'
 import { usePublisher, usePublisherFollowed } from './Context'
+import { useUnpaddedImageUrl } from '../useUnpaddedImageUrl'
 
 interface CardProps {
   backgroundColor?: string
@@ -63,7 +63,7 @@ export default function FeedCard (props: {
   const { followed, setFollowed } = usePublisherFollowed(props.publisherId)
 
   const backgroundColor = publisher.backgroundColor || getCardColor(publisher.feedSource?.url || publisher.publisherId)
-  const coverUrl = useGetUnpaddedImage(publisher.coverUrl?.url, undefined, /* useCache= */true)
+  const coverUrl = useUnpaddedImageUrl(publisher.coverUrl?.url, undefined, /* useCache= */true)
   return <Flex direction="column" gap={8}>
     <Card backgroundColor={backgroundColor} data-feed-card-is-followed={followed}>
       {coverUrl && <CoverImage backgroundImage={coverUrl} />}
diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
index 480b18d56bab..eeb708a07a66 100644
--- a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
+++ b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
@@ -7,8 +7,8 @@ import * as React from 'react'
 import styled from 'styled-components'
 import { getLocale } from '$web-common/locale'
 import Flex from '../../../Flex'
-import { useGetUnpaddedImage } from '../cards/CardImage'
 import { useChannelSubscribed, usePublisher, usePublisherFollowed } from './Context'
+import { useUnpaddedImageUrl } from '../useUnpaddedImageUrl'
 
 interface Props {
   publisherId: string
@@ -60,7 +60,7 @@ const ChannelNameText = styled.span`
 `
 
 function FavIcon (props: { src?: string }) {
-  const url = useGetUnpaddedImage(props.src, undefined, /* useCache= */true)
+  const url = useUnpaddedImageUrl(props.src, undefined, /* useCache= */true)
   const [error, setError] = React.useState(false)
   return <FavIconContainer>
     {url && !error && <img src={url} onError={() => setError(true)} />}
diff --git a/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts b/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
new file mode 100644
index 000000000000..1a42dd2614d1
--- /dev/null
+++ b/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
@@ -0,0 +1,58 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import getBraveNewsController from '../../../api/brave_news'
+
+const cache: { [url: string]: string } = {}
+export function useUnpaddedImageUrl (paddedUrl: string | undefined, onLoaded?: () => any, useCache?: boolean) {
+  const [unpaddedUrl, setUnpaddedUrl] = React.useState('')
+
+  React.useEffect(() => {
+    const onReceiveUnpaddedUrl = (result: string) => {
+      if (useCache) cache[paddedUrl!] = result
+      setUnpaddedUrl(result)
+
+      if (onLoaded) window.requestAnimationFrame(() => onLoaded())
+    }
+
+    // Storybook method
+    // @ts-expect-error
+    if (window.braveStorybookUnpadUrl) {
+      // @ts-expect-error
+      window.braveStorybookUnpadUrl(paddedUrl)
+        .then(onReceiveUnpaddedUrl)
+      return
+    }
+
+    if (!paddedUrl) return
+
+    if (cache[paddedUrl]) {
+      onReceiveUnpaddedUrl(cache[paddedUrl])
+      return
+    }
+
+    let blobUrl: string
+    getBraveNewsController().getImageData({ url: paddedUrl })
+      .then(async (result) => {
+        if (!result.imageData) {
+          return
+        }
+
+        const blob = new Blob([new Uint8Array(result.imageData)], { type: 'image/*' })
+        blobUrl = URL.createObjectURL(blob)
+        onReceiveUnpaddedUrl(blobUrl)
+      })
+      .catch(err => {
+        console.error(`Error getting image for ${paddedUrl}.`, err)
+      })
+
+      // Only revoke the URL if we aren't using the cache.
+      return () => {
+        if (!useCache) URL.revokeObjectURL(blobUrl)
+      }
+  }, [paddedUrl])
+  return unpaddedUrl
+}

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 2/4] 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
+  }
+}

From 0fc15797a1c0f92bab49b4526611559de9a5a972 Mon Sep 17 00:00:00 2001
From: Jay Harris <jay.harris@outlook.co.nz>
Date: Fri, 21 Oct 2022 14:07:29 +1300
Subject: [PATCH 3/4] Lazy load favicons

---
 .../default/braveToday/customize/FeedCard.tsx          |  2 +-
 .../default/braveToday/customize/SourcesListEntry.tsx  | 10 +++++++---
 .../default/braveToday/useUnpaddedImageUrl.ts          |  2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

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 77ff60a59959..26f41ed4796b 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
@@ -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
   })
diff --git a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
index eeb708a07a66..b95660a863da 100644
--- a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
+++ b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
@@ -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
@@ -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>
 }
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 92b2150bdd1f..8b90f089e687 100644
--- a/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
+++ b/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
@@ -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
 

From b0254852627218b913353ad862d7f6f51d7028d1 Mon Sep 17 00:00:00 2001
From: Jay Harris <jay.harris@outlook.co.nz>
Date: Mon, 24 Oct 2022 11:38:02 +1300
Subject: [PATCH 4/4] Changes for PR

---
 .../components/default/braveToday/customize/FeedCard.tsx      | 4 ++--
 .../default/braveToday/customize/SourcesListEntry.tsx         | 4 ++--
 .../components/default/braveToday/useUnpaddedImageUrl.ts      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

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 26f41ed4796b..693a2d176199 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
@@ -63,13 +63,13 @@ export default function FeedCard (props: {
   const { followed, setFollowed } = usePublisherFollowed(props.publisherId)
 
   const backgroundColor = publisher.backgroundColor || getCardColor(publisher.feedSource?.url || publisher.publisherId)
-  const { url: coverUrl, elementRef } = useLazyUnpaddedImageUrl(publisher.coverUrl?.url, {
+  const { url: coverUrl, setElementRef } = useLazyUnpaddedImageUrl(publisher.coverUrl?.url, {
     rootElement: document.getElementById('brave-news-configure'),
     rootMargin: '0px 0px 200px 0px',
     useCache: true
   })
 
-  return <Flex direction="column" gap={8} ref={elementRef}>
+  return <Flex direction="column" gap={8} ref={setElementRef}>
     <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/customize/SourcesListEntry.tsx b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
index b95660a863da..b535b3d965b3 100644
--- a/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
+++ b/components/brave_new_tab_ui/components/default/braveToday/customize/SourcesListEntry.tsx
@@ -60,13 +60,13 @@ const ChannelNameText = styled.span`
 `
 
 function FavIcon (props: { src?: string }) {
-  const { url, elementRef } = useLazyUnpaddedImageUrl(props.src, {
+  const { url, setElementRef } = useLazyUnpaddedImageUrl(props.src, {
     rootElement: document.getElementById('brave-news-configure'),
     rootMargin: '0px 0px 100px 0px',
     useCache: true
   })
   const [error, setError] = React.useState(false)
-  return <FavIconContainer ref={elementRef}>
+  return <FavIconContainer ref={setElementRef}>
     {url && !error && <img src={url} onError={() => setError(true)} />}
   </FavIconContainer>
 }
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 8b90f089e687..e29159654ffc 100644
--- a/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
+++ b/components/brave_new_tab_ui/components/default/braveToday/useUnpaddedImageUrl.ts
@@ -92,6 +92,6 @@ export function useLazyUnpaddedImageUrl (paddedUrl: string | undefined, options:
 
   return {
     url: useUnpaddedImageUrl(visible ? paddedUrl : undefined, options.onLoaded, options.useCache) || cache[paddedUrl!],
-    elementRef: setElementRef
+    setElementRef
   }
 }