fix: make sure to unregister all clients when "user-visible" option i…

…s out of viewport (#1098)
codesandbox · Feb 28, 2024 · 230960c · 230960c
1 parent 060ee9c
commit 230960c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
@@ -11,6 +11,25 @@ export const Basic: React.FC = () => {
   return (
     <div style={{ height: "400vh" }}>
       <Sandpack
+        files={{
+          "/App.js": `export default function TodoList() {
+            return (
+              // This doesn't quite work!
+              <h1>Hedy Lamarr's Todos</h1>
+              <img
+                src="https://i.imgur.com/yXOvdOSs.jpg"
+                alt="Hedy Lamarr"
+                class="photo"
+              >
+              <ul>
+                <li>Invent new traffic lights
+                <li>Rehearse a movie scene
+                <li>Improve spectrum technology
+              </ul>
+            );
+          }
+          `,
+        }}
         options={{
           initMode: "user-visible",
           bundlerURL: "https://786946de.sandpack-bundler-4bw.pages.dev",

diff --git a/sandpack-react/src/contexts/utils/useClient.ts b/sandpack-react/src/contexts/utils/useClient.ts
@@ -244,6 +244,8 @@ export const useClient: UseClient = (
   ): void => {
     if (entries.some((entry) => entry.isIntersecting)) {
       runSandpack();
+    } else {
+      unregisterAllClients();
     }
   };
 
@@ -266,7 +268,15 @@ export const useClient: UseClient = (
       // If any component registered a lazy anchor ref component, use that for the intersection observer
       intersectionObserver.current = new IntersectionObserver((entries) => {
         if (entries.some((entry) => entry.isIntersecting)) {
-          intersectionObserverCallback.current?.(entries);
+          // Trigger it once
+          if (
+            entries.some((entry) => entry.isIntersecting) &&
+            lazyAnchorRef.current
+          ) {
+            intersectionObserverCallback.current?.(entries);
+
+            intersectionObserver.current?.unobserve(lazyAnchorRef.current);
+          }
         }
       }, observerOptions);