refactor(mdx-renderer): simplify component implementation

- Remove Suspense and Skeleton loading state
- Convert to arrow function syntax
- Reorganize import statements
- Simplify export syntax

src/components/content/mdx-renderer.tsx

@@ -1,30 +1,24 @@
 import "@/styles/mdx.css";
+import {
+  DefaultDarkThemeConfig,
+  DefaultLightThemeConfig,
+} from "@/config/monaco-theme";
 import { cn } from "@/lib/utils";
-import { Suspense } from "react";
 import "katex/dist/katex.min.css";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import rehypePrettyCode from "rehype-pretty-code";
-import { Skeleton } from "@/components/ui/skeleton";
 import { MdxComponents } from "@/components/content/mdx-components";
-import { DefaultDarkThemeConfig, DefaultLightThemeConfig } from "@/config/monaco-theme";
 
 interface MdxRendererProps {
   source: string;
   className?: string;
 }
 
-export function MdxRenderer({ source, className }: MdxRendererProps) {
+const MdxRenderer = ({ source, className }: MdxRendererProps) => {
   return (
-    <Suspense
-      fallback={
-        <div className="h-full w-full p-4">
-          <Skeleton className="h-full w-full rounded-3xl" />
-        </div>
-      }
-    >
     <article className={cn("markdown-body", className)}>
       <MDXRemote
         source={source}
@@ -49,6 +43,7 @@ export function MdxRenderer({ source, className }: MdxRendererProps) {
         components={MdxComponents}
       />
     </article>
-    </Suspense>
   );
-}
+};
+
+export { MdxRenderer };