Merge pull request #4320 from cpinitiative/flicker_fix

fix flicker

Author: xyzqm

src/components/Editor/BaseEditor.tsx

@@ -0,0 +1,7 @@
+import MonacoEditor from '@monaco-editor/react';
+import React from 'react';
+export default function BaseEditor(props) {
+  // prevents light/dark mode flicker
+  const darkMode = document.documentElement.classList.contains('dark');
+  return <MonacoEditor {...props} theme={darkMode ? 'vs-dark' : 'light'} />;
+}

src/components/Editor/EditorPage.tsx

@@ -93,13 +93,6 @@ export default function EditorPage(props: PageProps): JSX.Element {
           <EditorTopNav />
 
           {typeof window !== 'undefined' && (
-            // <React.Suspense
-            //   fallback={
-            //     <div className="text-center mt-6 font-bold text-2xl">
-            //       Loading
-            //     </div>
-            //   }
-            // >
             <StyledSplit
               className="h-full relative flex-1 overflow-hidden"
               onDrag={() => {
@@ -123,7 +116,6 @@ export default function EditorPage(props: PageProps): JSX.Element {
                 </div>
               </div>
             </StyledSplit>
-            // </React.Suspense>
           )}
         </div>
       </Layout>

src/components/Editor/MainEditorInterface.tsx

@@ -18,8 +18,7 @@ import {
 import { DarkModeContext } from '../../context/DarkModeContext';
 import EditorTabBar from './EditorTabBar';
 import { conf as mdxConf, language as mdxLang } from './mdx-lang';
-
-const Editor = React.lazy(() => import('@monaco-editor/react'));
+const Editor = React.lazy(() => import('./BaseEditor'));
 
 export const MainEditorInterface = ({ className }): JSX.Element => {
   const activeFile = useAtomValue(activeFileAtom);