improve bundle size and speed by using code splitting

package.json

@@ -20,30 +20,30 @@
   "author": "Ajay Bura",
   "license": "AGPL-3.0-only",
   "dependencies": {
-    "@fontsource/inter": "4.5.14",
+    "@fontsource/inter": "4.5.15",
     "@fontsource/roboto": "4.5.8",
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
     "@tippyjs/react": "4.2.6",
-    "blurhash": "2.0.4",
+    "blurhash": "2.0.5",
     "browser-encrypt-attachment": "0.3.0",
     "dateformat": "5.0.3",
     "emojibase-data": "7.0.1",
     "file-saver": "2.0.5",
-    "flux": "4.0.3",
+    "flux": "4.0.4",
     "formik": "2.2.9",
-    "html-react-parser": "3.0.4",
-    "linkify-html": "4.0.2",
-    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "22.0.0",
+    "html-react-parser": "3.0.13",
+    "linkify-html": "4.1.0",
+    "linkifyjs": "4.1.0",
+    "matrix-js-sdk": "23.5.0",
     "preact": "10.13.1",
     "prop-types": "15.8.1",
     "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.2.0",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
+    "react-blurhash": "0.3.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
     "react-modal": "3.16.1",
-    "sanitize-html": "2.8.0",
+    "sanitize-html": "2.10.0",
     "tippy.js": "6.3.7",
     "twemoji": "14.0.2"
   },
@@ -51,23 +51,23 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@preact/preset-vite": "2.5.0",
     "@rollup/plugin-inject": "5.0.3",
-    "@rollup/plugin-wasm": "6.1.1",
-    "@types/node": "18.11.18",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
+    "@rollup/plugin-wasm": "6.1.2",
+    "@types/node": "18.15.5",
+    "@typescript-eslint/eslint-plugin": "5.56.0",
+    "@typescript-eslint/parser": "5.56.0",
     "buffer": "6.0.3",
-    "eslint": "8.29.0",
+    "eslint": "8.36.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "mini-svg-data-uri": "1.4.4",
-    "prettier": "2.8.1",
-    "sass": "1.56.2",
-    "typescript": "4.9.4",
-    "vite": "4.0.1",
-    "vite-plugin-static-copy": "0.13.0"
+    "prettier": "2.8.6",
+    "sass": "1.59.3",
+    "typescript": "5.0.2",
+    "vite": "4.2.1",
+    "vite-plugin-static-copy": "0.13.1"
   }
 }

src/app/atoms/loading-text/LoadingText.jsx

@@ -0,0 +1,6 @@
+import Text from '../text/Text';
+import './LoadingText.scss';
+
+export function LoadingText() {
+    return <Text className='loading-text'>Loading...</Text>
+}

src/app/atoms/loading-text/LoadingText.scss

@@ -0,0 +1,5 @@
+.loading-text {
+    display: block;
+    padding: var(--sp-tight);
+    color: var(--tc-surface-low);
+}

src/app/organisms/space-manage/SpaceManage.jsx

@@ -31,6 +31,7 @@ import InfoIC from '../../../../public/res/ic/outlined/info.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 import { useStore } from '../../hooks/useStore';
+import { LoadingText } from '../../atoms/loading-text/LoadingText';
 
 function SpaceManageBreadcrumb({ path, onSelect }) {
   return (
@@ -362,7 +363,7 @@ function SpaceManageContent({ roomId, requestClose }) {
               />
             )
         )))}
-        {!currentHierarchy && <Text>loading...</Text>}
+        {!currentHierarchy && <LoadingText />}
       </div>
       {currentHierarchy?.canLoadMore && !isLoading && (
         <Button onClick={loadRoomHierarchy}>Load more</Button>

src/app/pages/App.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
 import { isAuthenticated } from '../../client/state/auth';
+import { LoadingText } from '../atoms/loading-text/LoadingText';
 
-import Auth from '../templates/auth/Auth';
-import Client from '../templates/client/Client';
+const Auth = React.lazy(() => import('../templates/auth/Auth'));
+const Client = React.lazy(() => import('../templates/client/Client'));
 
 function App() {
-  return isAuthenticated() ? <Client /> : <Auth />;
+  return isAuthenticated() ? <React.Suspense fallback={<LoadingText/>}><Client /></React.Suspense> : <React.Suspense fallback={<LoadingText/>}><Auth /></React.Suspense>;
 }
 
 export default App;

vite.config.js

@@ -62,12 +62,26 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         inject({ Buffer: ['buffer', 'Buffer'] })
-      ]
-    }
+      ],
+      output: {
+        manualChunks: (id) => {
+          if (id.includes("node_modules")) {
+            if (id.includes("matrix")) {
+              return "vendor-matrix";
+            }
+            if (id.includes("emojibase")) {
+              return "vendor-emojibase";
+            }
+            return "vendor";
+          }
+        }
+      },
+      treeshake: "smallest"
+    },
   },
   resolve: {
     alias: {
       "react/jsx-runtime.js": "preact/compat/jsx-runtime"
     }
-  }
+  },
 });