fix: resolve interpolation race condition

Author: jaffrepaul

src/components/codeBlock/index.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import {RefObject, useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {RefObject, useContext, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {Clipboard} from 'react-feather';
 
 import {usePlausibleEvent} from 'sentry-docs/hooks/usePlausibleEvent';
 
 import styles from './code-blocks.module.scss';
 
+import {CodeContext} from '../codeContext';
 import {makeHighlightBlocks} from '../codeHighlights';
 import {makeKeywordsClickable} from '../codeKeywords';
 
@@ -53,6 +54,7 @@ function getCopiableText(element: HTMLDivElement) {
 export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
+  const codeContext = useContext(CodeContext);
 
   // Show the copy button after js has loaded
   // otherwise the copy button will not work
@@ -61,11 +63,17 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [isMounted, setIsMounted] = useState(false);
   const {emit} = usePlausibleEvent();
 
+  // Extract isLoading to avoid dependency array issues
+  const isContextLoading = codeContext?.isLoading ?? true;
+
   // Use useLayoutEffect to set isMounted synchronously before browser paints
   // This ensures keyword interpolation happens before the user sees anything
+  // Wait for codeKeywords to be loaded before enabling keyword interpolation
   useLayoutEffect(() => {
-    setIsMounted(true);
-  }, []);
+    if (codeContext && !isContextLoading) {
+      setIsMounted(true);
+    }
+  }, [codeContext, isContextLoading]);
 
   useEffect(() => {
     setShowCopyButton(true);