fix: re-sync onboarding options visibility after keyword interpolation

src/components/codeBlock/index.tsx

@@ -1,14 +1,16 @@
 'use client';
 
-import {RefObject, useEffect, 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';
+import {updateElementsVisibilityForOptions} from '../onboarding';
 
 export interface CodeBlockProps {
   children: React.ReactNode;
@@ -53,6 +55,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
@@ -83,6 +86,15 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
     };
   }, []);
 
+  // Re-sync onboarding visibility after keyword interpolation recreates DOM nodes.
+  // makeKeywordsClickable clones elements, losing .hidden classes. useLayoutEffect
+  // corrects this synchronously before paint to prevent visible flicker.
+  useLayoutEffect(() => {
+    if (isMounted && codeContext?.onboardingOptions) {
+      updateElementsVisibilityForOptions(codeContext.onboardingOptions, false);
+    }
+  }, [isMounted, codeContext?.onboardingOptions]);
+
   useCleanSnippetInClipboard(codeRef, {language});
 
   // Mermaid blocks should not be processed by CodeBlock - they need special client-side rendering

src/components/onboarding/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import {ReactNode, useContext, useEffect, useReducer, useState} from 'react';
+// eslint-disable-next-line no-restricted-imports -- Required for JSX in test environment
+import React, {ReactNode, useContext, useEffect, useReducer, useState} from 'react';
 import {QuestionMarkCircledIcon} from '@radix-ui/react-icons';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import {Button, Checkbox, Theme} from '@radix-ui/themes';