From 9563d66316fba4eaf94f0b408c62b61dcca7e337 Mon Sep 17 00:00:00 2001
From: stefanprobst <stefanprobst@posteo.de>
Date: Tue, 1 Oct 2024 08:54:30 +0200
Subject: [PATCH 1/2] docs: add note about client:only fallback slot

---
 src/content/docs/en/reference/directives-reference.mdx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx
index 51f0803199f00..c4c1ea470bc69 100644
--- a/src/content/docs/en/reference/directives-reference.mdx
+++ b/src/content/docs/en/reference/directives-reference.mdx
@@ -197,6 +197,16 @@ If the component is already hidden and shown by a media query in your CSS, then
 <SomeLitComponent client:only="lit" />
 ```
 
+#### Display loading content
+
+For components that render only on the client, it is also possible to display fallback content while they are loading. Use `slot="fallback"` on any child element to create content that will be displayed only until your client component is available:
+
+``` title="src/pages/index.astro" {2}
+<ClientComponent client:only="vue">
+  <div slot="fallback">Loading</div>
+</ClientComponent>
+```
+
 ### Custom Client Directives
 
 Since Astro 2.6.0, integrations can also add custom `client:*` directives to change how and when components should be hydrated.

From 53ce35c9ac65c9cf5ebc7c554aeb3d74b0b092b4 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@posteo.de>
Date: Tue, 1 Oct 2024 15:32:44 +0200
Subject: [PATCH 2/2] fix: add code block language

---
 src/content/docs/en/reference/directives-reference.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/reference/directives-reference.mdx b/src/content/docs/en/reference/directives-reference.mdx
index c4c1ea470bc69..6ffae0fce4dc9 100644
--- a/src/content/docs/en/reference/directives-reference.mdx
+++ b/src/content/docs/en/reference/directives-reference.mdx
@@ -201,7 +201,7 @@ If the component is already hidden and shown by a media query in your CSS, then
 
 For components that render only on the client, it is also possible to display fallback content while they are loading. Use `slot="fallback"` on any child element to create content that will be displayed only until your client component is available:
 
-``` title="src/pages/index.astro" {2}
+```astro {2}
 <ClientComponent client:only="vue">
   <div slot="fallback">Loading</div>
 </ClientComponent>