docs: fix content shift in references (medusajs#13765)

Author: shahednasser

www/apps/resources/app/references/[...slug]/page.tsx

@@ -16,13 +16,7 @@ export default async function ReferencesPage(props: PageProps) {
   const params = await props.params
   const { slug } = params
 
-  return (
-    <Suspense fallback={<Loading />}>
-      <div className="animate animate-fadeIn">
-        <ReferenceMDX slug={slug} />
-      </div>
-    </Suspense>
-  )
+  return <ReferenceMDX slug={slug} />
 }
 
 export async function generateMetadata({

www/apps/resources/components/ReferenceMDX/index.tsx

@@ -1,11 +1,12 @@
 "use client"
 
-import { MDXClientLazy, SerializeResult } from "next-mdx-remote-client/csr"
+import { MDXClient, SerializeResult } from "next-mdx-remote-client/csr"
 import MDXComponents from "../MDXComponents"
 import { Loading, swrFetcher } from "docs-ui"
 import useSWR from "swr"
 import { config } from "../../config"
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 type ReferenceMDXProps = {
   slug: string[]
@@ -29,5 +30,11 @@ export const ReferenceMDX = ({ slug }: ReferenceMDXProps) => {
     return notFound()
   }
 
-  return <MDXClientLazy {...serializedResult} components={MDXComponents} />
+  return (
+    <Suspense fallback={<Loading />}>
+      <div className="animate animate-fadeIn">
+        <MDXClient {...serializedResult} components={MDXComponents} />
+      </div>
+    </Suspense>
+  )
 }