perf: improve lazy load in code editor with loadable

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
     "@ant-design/icons": "^5.2.5",
+    "@loadable/component": "^5.16.3",
     "@monaco-editor/react": "^4.6.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^5.4.2",
@@ -98,6 +99,7 @@
     "@types/express": "^4.17.17",
     "@types/fs-extra": "^11.0.3",
     "@types/jsonwebtoken": "^9.0.2",
+    "@types/loadable__component": "^5.13.8",
     "@types/lodash": "^4.14.198",
     "@types/lodash-es": "^4.17.9",
     "@types/morgan": "^1.9.5",

pnpm-lock.yaml

@@ -7,6 +7,9 @@ dependencies:
   '@ant-design/icons':
     specifier: ^5.2.5
     version: 5.2.5(react-dom@18.2.0)(react@18.2.0)
+  '@loadable/component':
+    specifier: ^5.16.3
+    version: 5.16.3(react@18.2.0)
   '@monaco-editor/react':
     specifier: ^4.6.0
     version: 4.6.0(monaco-editor@0.45.0)(react-dom@18.2.0)(react@18.2.0)
@@ -225,6 +228,9 @@ devDependencies:
   '@types/jsonwebtoken':
     specifier: ^9.0.2
     version: 9.0.2
+  '@types/loadable__component':
+    specifier: ^5.13.8
+    version: 5.13.8
   '@types/lodash':
     specifier: ^4.14.198
     version: 4.14.198
@@ -1711,6 +1717,18 @@ packages:
       call-bind: 1.0.2
     dev: true
 
+  /@loadable/component@5.16.3(react@18.2.0):
+    resolution: {integrity: sha512-2mVvHs2988oVX2/zM0y6nYhJ4rTVHhkhRnpupBA0Rjl5tS8op9uSR4u5SLVfMLxzpspr2UiIBQD+wEuMsuq4Dg==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: ^16.3.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.22.11
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      react-is: 16.13.1
+    dev: false
+
   /@mapbox/geojson-rewind@0.5.2:
     resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
     hasBin: true
@@ -2573,6 +2591,12 @@ packages:
       '@types/node': 18.17.12
     dev: true
 
+  /@types/loadable__component@5.13.8:
+    resolution: {integrity: sha512-0FF/WihuPkR5IFOHiBzC95bSACvgQNUQCuNy1WF8F/lCBBHgS2SxarIk4CTjWM10A72ovpmXZDRcuAXZNS+/kQ==}
+    dependencies:
+      '@types/react': 18.2.21
+    dev: true
+
   /@types/lodash-es@4.17.9:
     resolution: {integrity: sha512-ZTcmhiI3NNU7dEvWLZJkzG6ao49zOIjEgIE0RgV7wbPxU0f2xT3VSAHw2gmst8swH6V0YkLRGp4qPlX/6I90MQ==}
     dependencies:
@@ -5410,6 +5434,12 @@ packages:
       type-fest: 0.8.1
     dev: true
 
+  /hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: false
+
   /hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true

src/client/App.tsx

@@ -73,9 +73,7 @@ export const App: React.FC = React.memo(() => {
           <BrowserRouter>
             <ConfigProvider theme={{ algorithm }}>
               <TokenLoginContainer>
-                <Suspense fallback={<Loading />}>
-                  <AppRoutes />
-                </Suspense>
+                <AppRoutes />
               </TokenLoginContainer>
             </ConfigProvider>
           </BrowserRouter>

src/client/components/CodeEditor/index.tsx

@@ -1,5 +1,5 @@
-import { lazy } from 'react';
+import loadable from '@loadable/component';
 
-export const CodeEditor = lazy(() =>
+export const CodeEditor = loadable(() =>
   import('./main').then((m) => ({ default: m.CodeEditor }))
 );