Add example loading slot

example_project/assets/svelte/ClientSideLoading.svelte

@@ -0,0 +1 @@
+<p>This is the component!</p>

example_project/lib/example_web/components/layouts/app.html.heex

@@ -119,6 +119,12 @@
       >
         15
       </a>
+      <a
+        href={~p"/client-side-loading"}
+        class="font-semibold leading-6 text-zinc-900 hover:text-zinc-700 hover:underline p-2"
+      >
+        16
+      </a>
     </div>
 
     <div class="flex items-center gap-4">

example_project/lib/example_web/live/live_client_side_loading.ex

@@ -0,0 +1,29 @@
+defmodule ExampleWeb.LiveClientSideLoading do
+  use ExampleWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <h1 class="text-3xl bold mb-4">Examples of the loading slot</h1>
+    <div class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-xl">Client side</h2>
+        <.svelte name="ClientSideLoading" ssr={false}>
+          <:loading>
+            <div class="animate-spin h-4 w-4 border-4 border-blue-500 rounded-full border-t-transparent"></div>
+          </:loading>
+        </.svelte>
+      </div>
+
+      <div>
+        <h2 class="text-xl">Server side (should not be used)</h2>
+        <p class="bold italic">This should flicker and throw a console warning</p>
+        <.svelte name="ClientSideLoading" socket={@socket}>
+          <:loading>
+            <div class="animate-spin h-4 w-4 border-4 border-blue-500 rounded-full border-t-transparent"></div>
+          </:loading>
+        </.svelte>
+      </div>
+    </div>
+    """
+  end
+end

example_project/lib/example_web/router.ex

@@ -34,6 +34,7 @@ defmodule ExampleWeb.Router do
     live "/slots-simple", LiveSlotsSimple
     live "/slots-dynamic", LiveSlotsDynamic
     live "/composition", LiveComposition
+    live "/client-side-loading", LiveClientSideLoading
   end
 
   # Other scopes may use custom stacks.