Better error handling

app/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <Navbar />
+            
             {children}
             <Toaster />
           </ThemeProvider>

app/page.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useRoutes } from '@/lib/clientActions';
 import Image from 'next/image';
 import Loading from '@/components/Loading';
+import Error from '@/components/Error';
 
 
 export default function Home() {
@@ -13,10 +14,8 @@ export default function Home() {
   const { data: routes, error, isLoading } = useRoutes();
   let routesMap: Route[] = routes as Route[];
 
-  if (error) return <div>Error loading routes</div>
-  if(isLoading) return (
-    <Loading />
-  )
+  if(error) return <Error />
+  if(isLoading) return <Loading />
 
     return (
       <main>

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",