feat: implement suspense for mdx content loading

[seer-by-sentry]

👋 Hi there! This PR was automatically generated by Autofix 🤖

This fix was triggered by Abhijeet Prasad

Fixes DOCS-8WS

• Implemented React Suspense to handle MDX content loading, improving perceived performance.
• Added a loading indicator component to display while MDX content is being fetched.
• Refactored the page component to separate MDX content rendering into a separate component wrapped with Suspense.
• Optimized remark and rehype plugins for better performance by removing unnecessary plugins and caching the getFileBySlug function.
• Removed unused imports and components from app/layout.tsx and updated styles.

If you have any questions or feedback for the Sentry team about this fix, please email [email protected] with the Run ID: 12641.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
develop-docs	❌ Failed (Inspect)			Mar 21, 2025 3:41pm
sentry-docs	❌ Failed (Inspect)			Mar 21, 2025 3:41pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
changelog	⬜️ Ignored (Inspect)	Visit Preview		Mar 21, 2025 3:41pm

[codecov]

Bundle Report

Changes will decrease total bundle size by 107.02kB (-0.52%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-server-cjs	10.48MB	-107.02kB (-1.01%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
1413.js (New)	1.45MB	1.45MB	100.0% 🚀
7511.js (New)	950.85kB	950.85kB	100.0% 🚀
../instrumentation.js	-3 bytes	908.25kB	-0.0%
9523.js	-3 bytes	884.31kB	-0.0%
../app/[[...path]]/page.js	176.09kB	711.83kB	32.87% ⚠️
../app/[[...path]]/page.js.nft.json	-19.59kB	363.07kB	-5.12%
../app/platform-redirect/page.js.nft.json	-19.59kB	362.98kB	-5.12%
../app/sitemap.xml/route.js.nft.json	-19.59kB	360.95kB	-5.15%
9071.js	4.41kB	220.71kB	2.04%
2065.js	1.21kB	83.19kB	1.48%
../app/sitemap.xml/route.js	-155 bytes	33.59kB	-0.46%
../app/platform-redirect/page.js	-54 bytes	30.83kB	-0.17%
979.js (New)	24.97kB	24.97kB	100.0% 🚀
9567.js	-7.14kB	11.55kB	-38.21%
../app/_not-found/page.js	-534 bytes	4.05kB	-11.66%
../app/_not-found/page.js.nft.json	-2 bytes	356 bytes	-0.56%
1729.js (Deleted)	-1.58MB	0 bytes	-100.0% 🗑️
4899.js (Deleted)	-1.04MB	0 bytes	-100.0% 🗑️
2239.js (Deleted)	-29.23kB	0 bytes	-100.0% 🗑️

Files in ../app/[[...path]]/page.js:

• ./app/[[...path]]/page.tsx → Total Size: 12.45kB

Files in 979.js:

• ./app/layout.tsx → Total Size: 3.26kB

Files in 9567.js:

• ./src/mdx.ts → Total Size: 16.13kB

App Routes Affected:

App Route	Size Change	Total Size	Change (%)
/[[...path]]	176.09kB	3.26MB	5.71% ⚠️
/platform-redirect	-54 bytes	2.58MB	-0.0%
/	-4.42kB	2.61MB	-0.17%

[AbhiPrasad]

Implemented React Suspense to handle MDX content loading, improving perceived performance.

This is a good change, but it's related to performance improvements, not fixing the issue we had

Added a loading indicator component to display while MDX content is being fetched.

This is assumed if you're adding Suspense

Refactored the page component to separate MDX content rendering into a separate component wrapped with Suspense.

Why refactor 😭 - I just want things fixed, don't spend time on improvements that make the PR harder tor review. If I wanted a refactor alongside the fix I woulda asked for it

Optimized remark and rehype plugins for better performance by removing unnecessary plugins and caching the getFileBySlug function.

Please don't determine "unnecessary plugins" for me - deleting all that code is recipe for disaster.

caching the getFileBySlug function is a great idea though, probably the only thing we should keep from all these changes. I assume the cache will reduce the calls to fetch data, so it should actually help reduce connection errors.

[AbhiPrasad]

This is a good change

[AbhiPrasad]

Extracted out the getFileBySlug change in #13106 - closing this PR