fix raw markdown flash on the initial chat load

Author: smutyala1at

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>
   );

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>
+  );
+}