From 01b26d74cc76f640a79e1bcca45db0ca420ff8b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= Date: Tue, 24 Jan 2023 22:43:37 +0100 Subject: [PATCH] Load `htmlToReact` component dynamically --- website/src/components/htmlToReact.js | 4 ++-- website/src/widgets/quickstart-training.js | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/website/src/components/htmlToReact.js b/website/src/components/htmlToReact.js index ed34a5878..443ac2dc9 100644 --- a/website/src/components/htmlToReact.js +++ b/website/src/components/htmlToReact.js @@ -7,6 +7,6 @@ const htmlToReactParser = new HtmlToReactParser() * @returns {Node} - The converted React elements. */ -export default function htmlToReact(html) { - return htmlToReactParser.parse(html) +export default function HtmlToReact(props) { + return htmlToReactParser.parse(props.children) } diff --git a/website/src/widgets/quickstart-training.js b/website/src/widgets/quickstart-training.js index f2ce0abed..62bdf1e0b 100644 --- a/website/src/widgets/quickstart-training.js +++ b/website/src/widgets/quickstart-training.js @@ -5,8 +5,8 @@ import 'prismjs/components/prism-ini.min.js' import { Quickstart } from '../components/quickstart' import generator, { DATA as GENERATOR_DATA } from './quickstart-training-generator' -import htmlToReact from '../components/htmlToReact' import models from '../../meta/languages.json' +import dynamic from 'next/dynamic' const DEFAULT_LANG = 'en' const DEFAULT_HARDWARE = 'cpu' @@ -70,6 +70,10 @@ const DATA = [ }, ] +const HtmlToReactDynamic = dynamic(() => import('../components/htmlToReact'), { + loading: () => <>, +}) + export default function QuickstartTraining({ id, title, download = 'base_config.cfg' }) { const [lang, setLang] = useState(DEFAULT_LANG) const [_components, _setComponents] = useState([]) @@ -134,7 +138,7 @@ export default function QuickstartTraining({ id, title, download = 'base_config. small codeLang="ini" > - {htmlToReact(displayContent)} + {displayContent} ) }