From 987ec628028dec10bdd0c4d054c5700a8be39acd Mon Sep 17 00:00:00 2001
From: Santosh <santosh.mutyala.dev@gmail.com>
Date: Sun, 9 Nov 2025 23:10:54 +0100
Subject: [PATCH] fix raw markdown flash on the initial chat load

---
 apps/docs/components/ai/markdown.tsx |  3 ++-
 apps/docs/components/ui/Skeleton.tsx | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/components/ui/Skeleton.tsx

diff --git a/apps/docs/components/ai/markdown.tsx b/apps/docs/components/ai/markdown.tsx
index f44d616..3d2eec0 100644
--- a/apps/docs/components/ai/markdown.tsx
+++ b/apps/docs/components/ai/markdown.tsx
@@ -14,6 +14,7 @@ import {
 import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
 import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Skeleton } from '../ui/Skeleton';
 
 export interface Processor {
   process: (content: string) => Promise<ReactNode>;
@@ -65,7 +66,7 @@ export function Markdown({ text }: { text: string }) {
   const deferredText = useDeferredValue(text);
 
   return (
-    <Suspense fallback={text}>
+    <Suspense fallback={<Skeleton />}>
       <Renderer text={deferredText} />
     </Suspense>
   );
diff --git a/apps/docs/components/ui/Skeleton.tsx b/apps/docs/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..49b3e90
--- /dev/null
+++ b/apps/docs/components/ui/Skeleton.tsx
@@ -0,0 +1,12 @@
+export function Skeleton({ lines = 4 }: { lines?: number }) {
+  return (
+    <div className="animate-pulse space-y-2">
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className={`rounded bg-fd-muted-foreground/10 ${i === 0 ? 'h-4 w-3/4' : 'h-3 w-full'}`}
+        />
+      ))}
+    </div>
+  );
+}