load the editor async to have the problem page load faster

varun7654 · May 6, 2024 · 8cb4963 · 8cb4963
1 parent b416ec2
commit 8cb4963
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/problem/Editor.tsx b/src/problem/Editor.tsx
@@ -5,8 +5,13 @@ import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/theme-github_dark";
 import "ace-builds/src-noconflict/ext-language_tools";
 
-
-export function getEditor(lang: string, onChange: (value: string) => void, defaultValue: string = "") {
+// lang: string, onChange: (value: string) => void, defaultValue: string = ""
+export default function Editor(
+    {lang, onChange, defaultValue = ""}: {
+        lang: string,
+        onChange: (value: string) => void,
+        defaultValue: string
+    }) {
 
     try {
         require(`ace-builds/src-noconflict/mode-${lang}`);

diff --git a/src/problem/Problem.tsx b/src/problem/Problem.tsx
@@ -1,9 +1,8 @@
 import {Marked} from "marked";
 import {markedHighlight} from "marked-highlight";
 import hljs from "highlight.js/lib/common";
-import React, {useEffect, useState} from "react";
+import React, {lazy, Suspense, useEffect, useState} from "react";
 import DOMPurify from "dompurify";
-import {getEditor} from "./Editor";
 import {HelpBoxAndButton} from "./Help";
 import {useParams} from "react-router-dom";
 import 'katex/dist/katex.min.css';
@@ -15,6 +14,8 @@ import markedKatex from "marked-katex-extension";
 import {parseProblem, ProblemData, TestCase} from "./ProblemParse";
 
 hljs.registerAliases([""], {languageName: "javascript"})
+
+const Editor = lazy(() => import("./Editor"));
 export const marked = new Marked(
     markedHighlight({
         langPrefix: 'hljs language-',
@@ -236,9 +237,14 @@ export default function Problem() {
             <div className="w-1/2" dangerouslySetInnerHTML={{__html: descParsed}}/>
             <div className="flex flex-row justify-between h-auto pt-2">
                 <div className="w-1/2 h-[calc(100vh*0.80)]">
-                    {getEditor(problemData.codeLang, (value) => {
-                        updateUserCode(value);
-                    }, userData.currentCode)}
+                    <Suspense fallback={<div className={"italic text-gray-300"}>The Editor is loading...</div>}>
+                        <Editor
+                            lang={problemData.codeLang}
+                            onChange={(value) => updateUserCode(value)}
+                            defaultValue={userData.currentCode}
+                        />
+                    </Suspense>
+
                     <div className="pt-2">
                         {nextProblem}
                     </div>