refactor: replace loading messages with LoadingState component

- Updated RootLayoutContent to utilize the LoadingState component for displaying loading messages during various application states, enhancing consistency and maintainability of the UI.

apps/ui/src/routes/__root.tsx

@@ -23,6 +23,7 @@ import { Toaster } from 'sonner';
 import { ThemeOption, themeOptions } from '@/config/theme-options';
 import { SandboxRiskDialog } from '@/components/dialogs/sandbox-risk-dialog';
 import { SandboxRejectionScreen } from '@/components/dialogs/sandbox-rejection-screen';
+import { LoadingState } from '@/components/ui/loading-state';
 
 const logger = createLogger('RootLayout');
 
@@ -330,7 +331,7 @@ function RootLayoutContent() {
   if (sandboxStatus === 'pending') {
     return (
       <main className="flex h-screen items-center justify-center" data-testid="app-container">
-        <div className="text-muted-foreground">Checking environment...</div>
+        <LoadingState message="Checking environment..." />
       </main>
     );
   }
@@ -354,7 +355,7 @@ function RootLayoutContent() {
   if (!isElectronMode() && !authChecked) {
     return (
       <main className="flex h-screen items-center justify-center" data-testid="app-container">
-        <div className="text-muted-foreground">Loading...</div>
+        <LoadingState message="Loading..." />
       </main>
     );
   }
@@ -364,7 +365,7 @@ function RootLayoutContent() {
   if (!isElectronMode() && !isAuthenticated) {
     return (
       <main className="flex h-screen items-center justify-center" data-testid="app-container">
-        <div className="text-muted-foreground">Redirecting to login...</div>
+        <LoadingState message="Redirecting to login..." />
       </main>
     );
   }