feat: Start the media preload on screen intersection

Author: willybrauner

Diff for: packages/ui/src/elements/Thumbnail/index.tsx

@@ -8,6 +8,7 @@ const baseClass = 'thumbnail'
 import type { SanitizedCollectionConfig } from 'payload'
 
 import { File } from '../../graphics/File/index.js'
+import { useIntersect } from '../../hooks/useIntersect.js'
 import { ShimmerEffect } from '../ShimmerEffect/index.js'
 
 export type ThumbnailProps = {
@@ -29,12 +30,20 @@ export const Thumbnail = (props: ThumbnailProps) => {
   const [src, setSrc] = React.useState<null | string>(
     fileSrc ? `${fileSrc}${imageCacheTag ? `?${imageCacheTag}` : ''}` : null,
   )
+  const [intersectionRef, entry] = useIntersect()
+  const [hasPreloaded, setHasPreloaded] = React.useState(false)
+
   React.useEffect(() => {
     if (!fileSrc) {
       setFileExists(false)
       return
     }
 
+    if (!entry?.isIntersecting || hasPreloaded) {
+      return
+    }
+    setHasPreloaded(true)
+
     if (fileType === 'video') {
       const video = document.createElement('video')
       video.src = fileSrc
@@ -58,12 +67,12 @@ export const Thumbnail = (props: ThumbnailProps) => {
     img.src = fileSrc
     img.onload = () => setFileExists(true)
     img.onerror = () => setFileExists(false)
-  }, [fileSrc, fileType, imageCacheTag])
+  }, [fileSrc, fileType, imageCacheTag, entry, hasPreloaded])
 
   const alt = props.alt || (filename as string)
 
   return (
-    <div className={classNames}>
+    <div className={classNames} ref={intersectionRef}>
       {fileExists === undefined && <ShimmerEffect height="100%" />}
       {fileExists && <img alt={alt} src={src} />}
       {fileExists === false && <File />}