diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 1b7d1b82..f799042a 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -28,8 +28,9 @@ import './i18n/init';
 
 import { subscribe, unsubscribe } from '@/utils/pluginKit';
 import resolveRoutes from '@/router';
+import InitialLoadingPlaceholder from '@/components/InitialLoadingPlaceholder';
 
-function App() {
+function useResolvedRoutes() {
   const [routes, setRoutes] = useState<RouteObject[]>([]);
 
   useEffect(() => {
@@ -44,8 +45,14 @@ function App() {
     };
   }, []);
 
+  return routes;
+}
+
+function App() {
+  const routes = useResolvedRoutes();
+
   if (routes.length === 0) {
-    return <div>initializing</div>;
+    return <InitialLoadingPlaceholder />;
   }
 
   const router = createBrowserRouter(routes, {
diff --git a/ui/src/components/InitialLoadingPlaceholder/index.tsx b/ui/src/components/InitialLoadingPlaceholder/index.tsx
new file mode 100644
index 00000000..28ba1cfd
--- /dev/null
+++ b/ui/src/components/InitialLoadingPlaceholder/index.tsx
@@ -0,0 +1,18 @@
+import { Spinner } from 'react-bootstrap';
+
+function InitialLoadingPlaceholder() {
+  return (
+    <div
+      style={{
+        flexGrow: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Spinner />
+      <span style={{ marginLeft: 8 }}>Initializing</span>
+    </div>
+  );
+}
+
+export default InitialLoadingPlaceholder;