feat: use suspense

app/layout.module.css

@@ -5,3 +5,7 @@
 .heading > a:hover {
   text-decoration: none;
 }
+
+.loading {
+  height: 50vh;
+}

app/page.tsx

@@ -1,9 +1,27 @@
-import { PluginOverview } from "@/app/client";
+import { Flex, Text } from "@radix-ui/themes";
+import { Suspense } from "react";
+
 import { getAllPlugins } from "@/lib/registry";
 
+import { PluginOverview } from "./client";
+import style from "./layout.module.css";
+
 export const revalidate = 300;
+
+function Loading() {
+  return (
+    <Flex align="center" justify="center" className={style.loading}>
+      <Text>Loading...</Text>
+    </Flex>
+  );
+}
+
 export default async function Home() {
   const plugins = await getAllPlugins();
   plugins.sort((a, b) => a.FullName.localeCompare(b.FullName));
-  return <PluginOverview plugins={plugins} />;
+  return (
+    <Suspense fallback={<Loading />}>
+      <PluginOverview plugins={plugins} />
+    </Suspense>
+  );
 }