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,54 +1,49 @@
 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
+    <article className={cn("markdown-body", className)}>
-      fallback={
+      <MDXRemote
-        <div className="h-full w-full p-4">
+        source={source}
-          <Skeleton className="h-full w-full rounded-3xl" />
+        options={{
-        </div>
+          mdxOptions: {
-      }
+            rehypePlugins: [
-    >
+              rehypeKatex,
-      <article className={cn("markdown-body", className)}>
+              [
-        <MDXRemote
+                rehypePrettyCode,
-          source={source}
+                {
-          options={{
+                  theme: {
-            mdxOptions: {
+                    light: DefaultLightThemeConfig.id,
-              rehypePlugins: [
+                    dark: DefaultDarkThemeConfig.id,
-                rehypeKatex,
-                [
-                  rehypePrettyCode,
-                  {
-                    theme: {
-                      light: DefaultLightThemeConfig.id,
-                      dark: DefaultDarkThemeConfig.id,
-                    },
-                    keepBackground: false,
                   },
-                ],
+                  keepBackground: false,
+                },
               ],
-              remarkPlugins: [remarkGfm, remarkMath],
+            ],
-            },
+            remarkPlugins: [remarkGfm, remarkMath],
-          }}
+          },
-          components={MdxComponents}
+        }}
-        />
+        components={MdxComponents}
-      </article>
+      />
-    </Suspense>
+    </article>
   );
-}
+};
+
+export { MdxRenderer };