add loading skeleton with server islands

Author: dsnsgithub

astro.config.mjs

@@ -8,7 +8,10 @@ import vercel from "@astrojs/vercel/serverless";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), icon(), react(), mdx()],
-  output: "hybrid",
-  adapter: vercel()
+	integrations: [tailwind(), icon(), react(), mdx()],
+	output: "hybrid",
+	adapter: vercel(),
+	experimental: {
+		serverIslands: true
+	}
 });

src/components/GithubFeedSkeleton.astro

@@ -0,0 +1,18 @@
+<div class="flex flex-col space-y-3">
+  {Array.from({ length: 5 }).map(() => (
+    <div class="mx-2 rounded-xl bg-viola-50 p-4 sm:mx-4 sm:p-5 animate-pulse">
+      <div class="flex items-start space-x-3 sm:space-x-4">
+        <div class="h-8 w-8 shrink-0 rounded-full bg-viola-200 sm:h-10 sm:w-10"></div>
+
+        <div class="min-w-0 flex-1 space-y-3">
+          <div class="flex justify-between">
+            <div class="h-4 w-2/3 rounded bg-viola-200"></div>
+            <div class="h-3 w-12 rounded bg-viola-200"></div>
+          </div>
+          <div class="h-3 w-full rounded bg-viola-200"></div>
+          <div class="h-3 w-24 rounded bg-viola-200"></div>
+        </div>
+      </div>
+    </div>
+  ))}
+</div>

src/pages/index.astro

@@ -8,6 +8,7 @@ import betterHudIcon from "../assets/betterhud.png";
 import { Icon } from "astro-icon/components";
 import DiscordStatus from "../components/DiscordStatus.tsx";
 import GithubFeed from "../components/GithubFeed.astro";
+import GithubFeedSkeleton from "../components/GithubFeedSkeleton.astro";
 ---
 
 <Layout title="dsns.dev" description="Check out what I do, and explore some of my projects.">
@@ -70,7 +71,9 @@ import GithubFeed from "../components/GithubFeed.astro";
 
 		<div class="m-2 rounded-lg bg-viola-100 p-6 shadow-lg lg:p-8">
 			<h2 class="mb-6 text-2xl font-bold">GitHub Feed</h2>
-			<GithubFeed />
+			<GithubFeed server:defer>
+				<GithubFeedSkeleton slot="fallback" />
+			</GithubFeed>
 		</div>
 	</div>
 </Layout>