From 415d13091d98bc007a80084b8078a824f2023ed8 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Fri, 17 Oct 2025 08:12:15 +0300
Subject: [PATCH] docs: fix content shift in references (#13765)

---
 www/apps/resources/app/references/[...slug]/page.tsx |  8 +-------
 www/apps/resources/components/ReferenceMDX/index.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/www/apps/resources/app/references/[...slug]/page.tsx b/www/apps/resources/app/references/[...slug]/page.tsx
index 975dfb6036..d645fb9ef5 100644
--- a/www/apps/resources/app/references/[...slug]/page.tsx
+++ b/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({
diff --git a/www/apps/resources/components/ReferenceMDX/index.tsx b/www/apps/resources/components/ReferenceMDX/index.tsx
index d81c957689..2bc1c25dd5 100644
--- a/www/apps/resources/components/ReferenceMDX/index.tsx
+++ b/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>
+  )
 }