router updates

quadratichq · Jan 8, 2025 · aa010e8 · aa010e8
1 parent 8954f57
commit aa010e8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/quadratic-client/src/index.tsx b/quadratic-client/src/index.tsx
@@ -2,9 +2,7 @@
 import '@/index.css';
 import '@/shared/shadcn/styles.css';
 
-import { QuadraticLoading } from '@/app/ui/loading/QuadraticLoading';
 import { router } from '@/router';
-import { ShowAfter } from '@/shared/components/ShowAfter';
 import * as Sentry from '@sentry/react';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
@@ -31,13 +29,6 @@ const container = document.getElementById('root');
 const root = createRoot(container as HTMLElement);
 root.render(
   <React.StrictMode>
-    <RouterProvider
-      router={router}
-      fallbackElement={
-        <ShowAfter delay={2000}>
-          <QuadraticLoading />
-        </ShowAfter>
-      }
-    />
+    <RouterProvider router={router} future={{ v7_startTransition: true }} />
   </React.StrictMode>
 );
diff --git a/quadratic-client/src/router.tsx b/quadratic-client/src/router.tsx
@@ -25,6 +25,7 @@ export const router = createBrowserRouter(
         loader={RootRoute.loader}
         Component={RootRoute.Component}
         ErrorBoundary={RootRoute.ErrorBoundary}
+        HydrateFallback={RootRoute.HydrateFallback}
       >
         <Route path="file">
           {/* Check that the browser is supported _before_ we try to load anything from the API */}

diff --git a/quadratic-client/src/routes/_root.tsx b/quadratic-client/src/routes/_root.tsx
@@ -1,7 +1,9 @@
+import { QuadraticLoading } from '@/app/ui/loading/QuadraticLoading';
 import { User, authClient } from '@/auth/auth';
 import { Empty } from '@/dashboard/components/Empty';
 import { GlobalSnackbarProvider } from '@/shared/components/GlobalSnackbarProvider';
 import { MuiTheme } from '@/shared/components/MuiTheme';
+import { ShowAfter } from '@/shared/components/ShowAfter';
 import { ROUTE_LOADER_IDS } from '@/shared/constants/routes';
 import { ThemeAccentColorEffects } from '@/shared/hooks/useThemeAccentColor';
 import { ThemeAppearanceModeEffects } from '@/shared/hooks/useThemeAppearanceMode';
@@ -41,6 +43,14 @@ export const Component = () => {
   );
 };
 
+export const HydrateFallback = () => {
+  return (
+    <ShowAfter delay={2000}>
+      <QuadraticLoading />
+    </ShowAfter>
+  );
+};
+
 export const ErrorBoundary = () => {
   let error = useRouteError();
   console.error(error);