Fix client:visible (#1999)

Fixes #1963

.changeset/famous-mice-sparkle.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix client:visible with multiple copies of same component

docs/src/components/RightSidebar/ThemeToggleButton.tsx

@@ -14,9 +14,9 @@ const icons = [
     fill="currentColor"
   >
     <path
-      fillRule="evenodd"
+      fill-rule="evenodd"
       d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-      clipRule="evenodd"
+      clip-rule="evenodd"
     />
   </svg>,
   <svg
@@ -30,7 +30,7 @@ const icons = [
   </svg>,
 ];
 
-const ThemeToggle: FunctionalComponent = () => {
+function ThemeToggle() {
   const [theme, setTheme] = useState(() => {
     if (import.meta.env.SSR) {
       return undefined;
@@ -59,7 +59,7 @@ const ThemeToggle: FunctionalComponent = () => {
         const icon = icons[i];
         const checked = t === theme;
         return (
-          <label className={checked ? ' checked' : ''}>
+          <label class={checked ? 'checked' : ''}>
             {icon}
             <input
               type="radio"
@@ -78,6 +78,6 @@ const ThemeToggle: FunctionalComponent = () => {
       })}
     </div>
   );
-};
+}
 
 export default ThemeToggle;

packages/astro/src/runtime/client/visible.ts

@@ -16,11 +16,14 @@ export default async function onVisible(astroId: string, _options: HydrateOption
     }
   };
 
-  const io = new IntersectionObserver(([entry]) => {
-    if (!entry.isIntersecting) return;
-    // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
-    io.disconnect();
-    cb();
+  const io = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+      // As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
+      io.disconnect();
+      cb();
+      break; // break loop on first match
+    }
   });
 
   for (const root of roots) {