From f1701822ed069d70841e8b40392e55bb28bf3eb6 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 20 Mar 2025 21:58:21 +0900
Subject: fix(frontend): prevent flickering

---
 frontend/app/components/Gaming/CodeBlock.tsx | 32 ++++++----------------------
 1 file changed, 7 insertions(+), 25 deletions(-)

(limited to 'frontend/app/components/Gaming/CodeBlock.tsx')

diff --git a/frontend/app/components/Gaming/CodeBlock.tsx b/frontend/app/components/Gaming/CodeBlock.tsx
index 16ff84e..019709a 100644
--- a/frontend/app/components/Gaming/CodeBlock.tsx
+++ b/frontend/app/components/Gaming/CodeBlock.tsx
@@ -1,39 +1,21 @@
-import { useEffect, useState } from "react";
-import { codeToHtml } from "../../shiki.bundle";
+import { JSX, useLayoutEffect, useState } from "react";
+import { type BundledLanguage, highlight } from "../../highlight";
 
 type Props = {
 	code: string;
-	language: string;
+	language: BundledLanguage;
 };
 
 export default function CodeBlock({ code, language }: Props) {
-	const [highlightedCode, setHighlightedCode] = useState<string | null>(null);
+	const [nodes, setNodes] = useState<JSX.Element | null>(null);
 
-	useEffect(() => {
-		let isMounted = true;
-
-		(async () => {
-			const highlighted = await codeToHtml(code, {
-				lang: language,
-				theme: "github-light",
-			});
-			if (isMounted) {
-				setHighlightedCode(highlighted);
-			}
-		})();
-
-		return () => {
-			isMounted = false;
-		};
+	useLayoutEffect(() => {
+		highlight(code, language).then(setNodes);
 	}, [code, language]);
 
 	return (
 		<pre className="h-full w-full p-2 bg-gray-50 rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
-			{highlightedCode === null ? (
-				<code>{code}</code>
-			) : (
-				<code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
-			)}
+			{nodes === null ? <code>{code}</code> : nodes}
 		</pre>
 	);
 }
-- 
cgit v1.2.3-70-g09d2