From 8a5de03098f0376420bcad66397e911e45779462 Mon Sep 17 00:00:00 2001
From: Drew Powers <1369770+drwpow@users.noreply.github.com>
Date: Tue, 23 Nov 2021 15:38:26 -0700
Subject: [PATCH] Fix client:visible (#1999)

Fixes #1963
---
 .changeset/famous-mice-sparkle.md                   |  5 +++++
 .../components/RightSidebar/ThemeToggleButton.tsx   | 10 +++++-----
 packages/astro/src/runtime/client/visible.ts        | 13 ++++++++-----
 3 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/famous-mice-sparkle.md

diff --git a/.changeset/famous-mice-sparkle.md b/.changeset/famous-mice-sparkle.md
new file mode 100644
index 000000000000..37f163d310ba
--- /dev/null
+++ b/.changeset/famous-mice-sparkle.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix client:visible with multiple copies of same component
diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/docs/src/components/RightSidebar/ThemeToggleButton.tsx
index d3dc678c2b96..68927fad2d91 100644
--- a/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ b/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;
diff --git a/packages/astro/src/runtime/client/visible.ts b/packages/astro/src/runtime/client/visible.ts
index bf49c8b3cf00..8abd6e1c4202 100644
--- a/packages/astro/src/runtime/client/visible.ts
+++ b/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) {