Revert "Add lazyRoot optional property to next/image component (vercel#33290)"

This reverts commit 7452c0b.

Author: 11koukou

docs/api-reference/next/image.md

@@ -16,7 +16,6 @@ description: Enable Image Optimization with the built-in Image component.
 
 | Version   | Changes                                                                                           |
 | --------- | ------------------------------------------------------------------------------------------------- |
-| `v12.0.9` | `lazyRoot` prop added                                                                             |
 | `v12.0.0` | `formats` configuration added.<br/>AVIF support added.<br/>Wrapper `<div>` changed to `<span>`.   |
 | `v11.1.0` | `onLoadingComplete` and `lazyBoundary` props added.                                               |
 | `v11.0.0` | `src` prop support for static import.<br/>`placeholder` prop added.<br/>`blurDataURL` prop added. |
@@ -222,12 +221,6 @@ A string (with similar syntax to the margin property) that acts as the bounding
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
 
-### lazyRoot
-
-A React [Ref](https://reactjs.org/docs/refs-and-the-dom.html) pointing to the Element which the [lazyBoundary](#lazyBoundary) calculates for the Intersection detection. Defaults to `null`, referring to the document viewport.
-
-[Learn more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root)
-
 ### unoptimized
 
 When true, the source image will be served as-is instead of changing quality,

packages/next/client/image.tsx

@@ -101,7 +101,6 @@ export type ImageProps = Omit<
   quality?: number | string
   priority?: boolean
   loading?: LoadingValue
-  lazyRoot?: React.RefObject<HTMLElement> | null
   lazyBoundary?: string
   placeholder?: PlaceholderValue
   blurDataURL?: string
@@ -322,7 +321,6 @@ export default function Image({
   unoptimized = false,
   priority = false,
   loading,
-  lazyRoot = null,
   lazyBoundary = '200px',
   className,
   quality,
@@ -514,7 +512,6 @@ export default function Image({
   }
 
   const [setIntersection, isIntersected] = useIntersection<HTMLImageElement>({
-    rootRef: lazyRoot,
     rootMargin: lazyBoundary,
     disabled: !isLazy,
   })

packages/next/client/use-intersection.tsx

@@ -4,14 +4,8 @@ import {
   cancelIdleCallback,
 } from './request-idle-callback'
 
-type UseIntersectionObserverInit = Pick<
-  IntersectionObserverInit,
-  'rootMargin' | 'root'
->
-
-type UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit & {
-    rootRef?: React.RefObject<HTMLElement> | null
-  }
+type UseIntersectionObserverInit = Pick<IntersectionObserverInit, 'rootMargin'>
+type UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit
 type ObserveCallback = (isVisible: boolean) => void
 type Observer = {
   id: string
@@ -22,15 +16,14 @@ type Observer = {
 const hasIntersectionObserver = typeof IntersectionObserver !== 'undefined'
 
 export function useIntersection<T extends Element>({
-  rootRef,
   rootMargin,
   disabled,
 }: UseIntersection): [(element: T | null) => void, boolean] {
   const isDisabled: boolean = disabled || !hasIntersectionObserver
 
   const unobserve = useRef<Function>()
   const [visible, setVisible] = useState(false)
-  const [root, setRoot] = useState(rootRef ? rootRef.current : null)
+
   const setRef = useCallback(
     (el: T | null) => {
       if (unobserve.current) {
@@ -44,11 +37,11 @@ export function useIntersection<T extends Element>({
         unobserve.current = observe(
           el,
           (isVisible) => isVisible && setVisible(isVisible),
-          { root, rootMargin }
+          { rootMargin }
         )
       }
     },
-    [isDisabled, root, rootMargin, visible]
+    [isDisabled, rootMargin, visible]
   )
 
   useEffect(() => {
@@ -60,9 +53,6 @@ export function useIntersection<T extends Element>({
     }
   }, [visible])
 
-  useEffect(() => {
-    if (rootRef) setRoot(rootRef.current)
-  }, [rootRef])
   return [setRef, visible]
 }
 

test/integration/image-component/default/pages/lazy-noref.js

@@ -1008,37 +1008,6 @@ function runTests(mode) {
       }
     }
   })
-
-  it('should load the image when the lazyRoot prop is used', async () => {
-    let browser
-    try {
-      //trying on '/lazy-noref' it fails
-      browser = await webdriver(appPort, '/lazy-withref')
-
-      await check(async () => {
-        const result = await browser.eval(
-          `document.getElementById('myImage').naturalWidth`
-        )
-
-        if (result < 400) {
-          throw new Error('Incorrectly loaded image')
-        }
-
-        return 'result-correct'
-      }, /result-correct/)
-
-      expect(
-        await hasImageMatchingUrl(
-          browser,
-          `http://localhost:${appPort}/_next/image?url=%2Ftest.jpg&w=828&q=75`
-        )
-      ).toBe(true)
-    } finally {
-      if (browser) {
-        await browser.close()
-      }
-    }
-  })
 }
 
 describe('Image Component Tests', () => {