Add suspense

Author: bancek

vault-web/src/App.tsx

@@ -60,7 +60,10 @@ export function getApp(
 
                           <ModalsProvider>
                             <Suspense fallback={<LoadingCircle />}>
-                              <RouterProvider router={router} />
+                              <RouterProvider
+                                router={router}
+                                future={{ v7_startTransition: true }}
+                              />
                             </Suspense>
 
                             <Dialogs />

vault-web/src/components/dashboard/DashboardSidenavLinks.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { useTheme } from '@emotion/react';
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { buttonReset } from '../../styles/mixins/buttons';
@@ -99,7 +99,9 @@ export const DashboardSidenavLinks = memo(() => {
         </div>
       </footer>
 
-      <IntroModalLazy isVisible={intro.isVisible} hide={intro.hide} />
+      <Suspense>
+        <IntroModalLazy isVisible={intro.isVisible} hide={intro.hide} />
+      </Suspense>
     </>
   );
 });

vault-web/src/features/repo-files-details/RepoFilesDetailsTextEditor.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { Suspense, memo, useCallback } from 'react';
 
 import { ErrorComponent } from '../../components/ErrorComponent';
 import { LoadingCircle } from '../../components/LoadingCircle';
@@ -41,13 +41,15 @@ export const RepoFilesDetailsTextEditor = memo<{
     text === undefined ? (
     <LoadingCircle />
   ) : (
-    <TextEditorLazy
-      fileName={fileName}
-      text={text}
-      isEditing={isEditing}
-      width={width}
-      height={height}
-      onChange={onChange}
-    />
+    <Suspense>
+      <TextEditorLazy
+        fileName={fileName}
+        text={text}
+        isEditing={isEditing}
+        width={width}
+        height={height}
+        onChange={onChange}
+      />
+    </Suspense>
   );
 });

vault-web/src/features/repo-files/RepoFilesDropZone.tsx

@@ -1,11 +1,15 @@
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 
 import { RepoFilesDropZoneDesktopLazy } from './RepoFilesDropZoneDesktopLazy';
 import { RepoFilesDropZoneWeb } from './RepoFilesDropZoneWeb';
 
 export const RepoFilesDropZone = memo(() => {
   if (import.meta.env.VITE_VAULT_APP === 'desktop') {
-    return <RepoFilesDropZoneDesktopLazy />;
+    return (
+      <Suspense>
+        <RepoFilesDropZoneDesktopLazy />
+      </Suspense>
+    );
   } else {
     return <RepoFilesDropZoneWeb />;
   }