From b17ce2ee4b210028b7deda0bf843583b548694c8 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 24 Jun 2025 11:51:14 -0700
Subject: [PATCH] gets rid of interaction observer

---
 src/components/Visible/Visible.svelte         | 33 +++----------------
 .../Visible/demo/VisibleDemo.svelte           |  2 +-
 2 files changed, 5 insertions(+), 30 deletions(-)

diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 1cd44968..4f008c19 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -1,6 +1,6 @@
 <!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
 
   interface Props {
     /**
@@ -29,8 +29,9 @@
      * Specify a pixel value.
      */
     right?: number;
-    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
-    threshold?: number;
+    /**
+     * A snippet that renders inside the component.
+     */
     children?: Snippet<[boolean]>;
   }
 
@@ -40,7 +41,6 @@
     bottom = 0,
     left = 0,
     right = 0,
-    threshold = 0,
     children,
   }: Props = $props();
 
@@ -62,31 +62,6 @@
       if (once && visible) visibleOnce = true;
     }
   }
-
-  onMount(() => {
-    if (typeof IntersectionObserver !== 'undefined') {
-      const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          visible = entries[0].isIntersecting;
-          if (visible && once && container) {
-            observer.unobserve(container);
-          }
-        },
-        {
-          rootMargin,
-          threshold,
-        }
-      );
-
-      if (container) observer.observe(container);
-      // Unobserve when the component is unmounted
-      return () => {
-        if (container) observer.unobserve(container);
-      };
-    }
-  });
 </script>
 
 <svelte:window onscroll={scrollHandler} />
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
index 919758c8..ca97581a 100644
--- a/src/components/Visible/demo/VisibleDemo.svelte
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -5,7 +5,7 @@
   import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
   import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
 
-  let top = 200;
+  let top = 100;
 
   const demoText =
     'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';