diff --git a/app/layout.tsx b/app/layout.tsx
index 4b473c1b1..d46652c81 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,8 +4,9 @@ import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { ReactFlowProvider } from "@xyflow/react";
 import { Provider } from "jotai";
-import type { ReactNode } from "react";
+import { type ReactNode, Suspense } from "react";
 import { AuthProvider } from "@/components/auth/provider";
+import { GitHubStarsLoader } from "@/components/github-stars-loader";
 import { GitHubStarsProvider } from "@/components/github-stars-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
@@ -27,69 +28,50 @@ export const viewport: Viewport = {
   viewportFit: "cover",
 };
 
-const GITHUB_REPO = "vercel-labs/workflow-builder-template";
-
-async function getGitHubStars(): Promise<number | null> {
-  try {
-    const response = await fetch(
-      `https://api.github.com/repos/${GITHUB_REPO}`,
-      {
-        headers: {
-          Accept: "application/vnd.github.v3+json",
-          ...(process.env.GITHUB_TOKEN && {
-            Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
-          }),
-        },
-        next: { revalidate: 3600 }, // Cache for 1 hour
-      }
-    );
-
-    if (!response.ok) {
-      return null;
-    }
-
-    const data = await response.json();
-    return data.stargazers_count;
-  } catch {
-    return null;
-  }
-}
-
 type RootLayoutProps = {
   children: ReactNode;
 };
 
-const RootLayout = async ({ children }: RootLayoutProps) => {
-  const stars = await getGitHubStars();
-
+// Inner content wrapped by GitHubStarsProvider (used for both loading and loaded states)
+function LayoutContent({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={cn(sans.variable, mono.variable, "antialiased")}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          disableTransitionOnChange
-          enableSystem
-        >
-          <Provider>
-            <AuthProvider>
-              <GitHubStarsProvider stars={stars}>
-                <ReactFlowProvider>
-                  <PersistentCanvas />
-                  <div className="pointer-events-none relative z-10">
-                    {children}
-                  </div>
-                </ReactFlowProvider>
-              </GitHubStarsProvider>
-              <Toaster />
-            </AuthProvider>
-          </Provider>
-        </ThemeProvider>
-        <Analytics />
-        <SpeedInsights />
-      </body>
-    </html>
+    <ReactFlowProvider>
+      <PersistentCanvas />
+      <div className="pointer-events-none relative z-10">{children}</div>
+    </ReactFlowProvider>
   );
-};
+}
+
+const RootLayout = ({ children }: RootLayoutProps) => (
+  <html lang="en" suppressHydrationWarning>
+    <body className={cn(sans.variable, mono.variable, "antialiased")}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        disableTransitionOnChange
+        enableSystem
+      >
+        <Provider>
+          <AuthProvider>
+            <Suspense
+              fallback={
+                <GitHubStarsProvider stars={null}>
+                  <LayoutContent>{children}</LayoutContent>
+                </GitHubStarsProvider>
+              }
+            >
+              <GitHubStarsLoader>
+                <LayoutContent>{children}</LayoutContent>
+              </GitHubStarsLoader>
+            </Suspense>
+            <Toaster />
+          </AuthProvider>
+        </Provider>
+      </ThemeProvider>
+      <Analytics />
+      <SpeedInsights />
+    </body>
+  </html>
+);
 
 export default RootLayout;
diff --git a/components/github-stars-loader.tsx b/components/github-stars-loader.tsx
new file mode 100644
index 000000000..6f43463f3
--- /dev/null
+++ b/components/github-stars-loader.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { GitHubStarsProvider } from "@/components/github-stars-provider";
+
+const GITHUB_REPO = "vercel-labs/workflow-builder-template";
+
+async function getGitHubStars(): Promise<number | null> {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/${GITHUB_REPO}`,
+      {
+        headers: {
+          Accept: "application/vnd.github.v3+json",
+          ...(process.env.GITHUB_TOKEN && {
+            Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+          }),
+        },
+        next: { revalidate: 3600 }, // Cache for 1 hour
+      }
+    );
+
+    if (!response.ok) {
+      return null;
+    }
+
+    const data = await response.json();
+    return data.stargazers_count;
+  } catch {
+    return null;
+  }
+}
+
+export async function GitHubStarsLoader({ children }: { children: ReactNode }) {
+  const stars = await getGitHubStars();
+  return <GitHubStarsProvider stars={stars}>{children}</GitHubStarsProvider>;
+}
