chore(astro): Make sure only one fallback slot renders

clerk · Feb 20, 2025 · 4c6b1fe · 4c6b1fe
1 parent c5d88ad
commit 4c6b1fe
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/astro/src/astro-components/control/Protect.astro b/packages/astro/src/astro-components/control/Protect.astro
@@ -27,10 +27,18 @@ type Props = ProtectProps & {
 const { isStatic, ...props } = Astro.props;
 
 const ProtectComponent = isStaticOutput(isStatic) ? ProtectCSR : ProtectSSR;
+
+// Note: Astro server islands also use a "fallback" slot for loading states
+// See: https://docs.astro.build/en/guides/server-islands/#server-island-fallback-content
+// We use "protect-fallback" as our preferred slot name to avoid conflicts
+const hasProtectFallback = Astro.slots.has('protect-fallback');
 ---
 
 <ProtectComponent {...props}>
   <slot />
-  <slot name="protect-fallback" slot="protect-fallback" />
-  <slot name="fallback" slot="fallback" />
+  {hasProtectFallback ? (
+    <slot name="protect-fallback" slot="protect-fallback" />
+  ) : (
+    <slot name="fallback" slot="fallback" />
+  )}
 </ProtectComponent>
diff --git a/packages/astro/src/astro-components/control/ProtectSSR.astro b/packages/astro/src/astro-components/control/ProtectSSR.astro
@@ -9,13 +9,18 @@ const isUnauthorized =
   (typeof Astro.props.condition === "function" &&
     !Astro.props.condition(has)) ||
   ((Astro.props.role || Astro.props.permission) && !has(Astro.props));
-
-// Note: Astro server islands also use a "fallback" slot for loading states
-// See: https://docs.astro.build/en/guides/server-islands/#server-island-fallback-content
-// We use "protect-fallback" as our preferred slot name to avoid conflicts
-const fallbackSlot = Astro.slots.has('protect-fallback') 
-  ? 'protect-fallback' 
-  : 'fallback';
+  
+const hasProtectFallback = Astro.slots.has('protect-fallback');
 ---
 
-{isUnauthorized ? <slot name={fallbackSlot} /> : <slot />}
+{
+  isUnauthorized ? (
+    hasProtectFallback ? (
+      <slot name="protect-fallback" />
+    ) : (
+      <slot name="fallback" />
+    )
+  ) : (
+    <slot />
+  )
+}