Merge pull request #50 from jonathantneal/jn/use-span-fallback

feat: use <span> to wrap fallback, prevent parsing issues
bholmesdev · Mar 18, 2024 · 0c88e91 · 0c88e91
2 parents 12bbf6c + 25bf781
commit 0c88e91
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/tender-balloons-admire.md b/.changeset/tender-balloons-admire.md
@@ -0,0 +1,5 @@
+---
+"simple-stack-stream": patch
+---
+
+Change Suspense wrapper from a `<div>` to a `<span>`. This ensures inline HTML content is correctly parsed.
diff --git a/packages/stream/components/Suspense.astro b/packages/stream/components/Suspense.astro
@@ -9,9 +9,9 @@ const result = await Astro.locals.suspend(() => Astro.slots.render("default"));
   result.render === "fallback" && (
     <>
       <Fragment set:html={fallbackMarkerStart(result.id)} />
-        <div style="display: contents" data-suspense-fallback={result.id}>
+        <span style="display: contents" data-suspense-fallback={result.id}>
           <slot name="fallback" />
-        </div>
+        </span>
       <Fragment set:html={fallbackMarkerEnd(result.id)} />
     </>
   )