diff --git a/packages/editor/src/extensions/image/component.tsx b/packages/editor/src/extensions/image/component.tsx
index b14ec6da7..77b2af363 100644
--- a/packages/editor/src/extensions/image/component.tsx
+++ b/packages/editor/src/extensions/image/component.tsx
@@ -57,7 +57,6 @@ export function ImageComponent(
   } | null>(null);
   const controllerRef = useRef(new AbortController());
 
-  const isMobile = useIsMobile();
   const { inView, ref: imageRef } = useObserver<HTMLImageElement>({
     threshold: 0.2,
     once: true
diff --git a/packages/editor/src/hooks/use-observer.ts b/packages/editor/src/hooks/use-observer.ts
index fe3132e44..818d445c9 100644
--- a/packages/editor/src/hooks/use-observer.ts
+++ b/packages/editor/src/hooks/use-observer.ts
@@ -45,8 +45,10 @@ export function useObserver<T extends Element = Element>({
   );
 
   useEffect(() => {
+    if (!ref.current) return;
+
     const options = {
-      root: null,
+      root: ref.current.closest(".ms-container"),
       rootMargin: rootMargin,
       threshold: threshold
     };
@@ -54,12 +56,8 @@ export function useObserver<T extends Element = Element>({
     observer.current = new IntersectionObserver((entries) => {
       updateInView(entries[0].isIntersecting);
     }, options);
-  });
 
-  useEffect(() => {
-    if (ref.current) {
-      observer?.current?.observe(ref.current);
-    }
+    observer.current.observe(ref.current);
 
     const reference = ref.current;
 
@@ -69,7 +67,7 @@ export function useObserver<T extends Element = Element>({
         observer.current?.disconnect();
       }
     };
-  });
+  }, [rootMargin, threshold, updateInView]);
 
   return { inView, ref };
 }