lazy loading

Author: Aniket-Engg

apps/remix-ide/src/index.tsx

@@ -1,16 +1,18 @@
 // eslint-disable-next-line no-use-before-define
-import React from 'react'
+import React, { Suspense, lazy } from 'react'
 import ReactDOM from 'react-dom'
 import AppComponent from './app'
 // eslint-disable-next-line no-unused-vars
-import { RemixApp } from '@remix-ui/app'
+const RemixApp = lazy(() => import ('@remix-ui/app'));
 
 const appComponent = new AppComponent()
 appComponent.run()
 
 ReactDOM.render(
   <React.StrictMode>
-    <RemixApp app={appComponent}></RemixApp>
+    <Suspense fallback={<div>Loading...</div>}>
+      <RemixApp app={appComponent} />
+    </Suspense>
   </React.StrictMode>,
   document.getElementById('root')
 )

apps/remix-ide/tsconfig.json

@@ -4,10 +4,8 @@
     "jsx": "react",
     "allowJs": true,
     "esModuleInterop": true,
-    "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "types": ["node", "jest"],
-    "module": "es6",
     "resolveJsonModule": true
   },
   "files": [

libs/remix-ui/app/src/index.ts

@@ -1,4 +1,4 @@
-export { default as RemixApp } from './lib/remix-app/remix-app'
+export { default as default } from './lib/remix-app/remix-app'
 export { dispatchModalContext } from './lib/remix-app/context/context'
 export { ModalProvider } from './lib/remix-app/context/provider'
 export { AppModal } from './lib/remix-app/interface/index'