diff --git a/packages/webapp/src/components/Preferences/PreferencesContentRoute.tsx b/packages/webapp/src/components/Preferences/PreferencesContentRoute.tsx
index 96442d625..199b08a56 100644
--- a/packages/webapp/src/components/Preferences/PreferencesContentRoute.tsx
+++ b/packages/webapp/src/components/Preferences/PreferencesContentRoute.tsx
@@ -1,23 +1,33 @@
 // @ts-nocheck
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { getPreferenceRoutes } from '@/routes/preferences';
+import { Spinner } from '@blueprintjs/core';
+import { Box } from '../Layout';
 
 export default function DashboardContentRoute() {
   const preferencesRoutes = getPreferenceRoutes();
 
   return (
     <Route pathname="/preferences">
-      <Switch>
-        {preferencesRoutes.map((route, index) => (
-          <Route
-            key={index}
-            path={`${route.path}`}
-            exact={route.exact}
-            component={route.component}
-          />
-        ))}
-      </Switch>
+      <Suspense
+        fallback={
+          <Box style={{ padding: 20 }}>
+            <Spinner size={20} />
+          </Box>
+        }
+      >
+        <Switch>
+          {preferencesRoutes.map((route, index) => (
+            <Route
+              key={index}
+              path={`${route.path}`}
+              exact={route.exact}
+              component={route.component}
+            />
+          ))}
+        </Switch>
+      </Suspense>
     </Route>
   );
 }