fix(userFeedbackDBLoading)

Added extra user feedback to db loading

apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx

@@ -17,7 +17,8 @@ export default function DatabaseSelector({}) {
   const [dbSelectionMenuOpen, setDbSelectionMenuOpen] = useState<boolean>(false);
   const [settingsMenuOpen, setSettingsMenuOpen] = useState<boolean>(false);
   const [selectedDatabase, setSelectedDatabase] = useState<DatabaseInfo | null>(null);
-  const [addDatabaseFormOpen, setAddDatabaseFormOpen] = useState(false);
+  const [addDatabaseFormOpen, setAddDatabaseFormOpen] = useState<boolean>(false);
+  const [connectionError, setConnectionError] = useState<boolean>(false);
 
   useEffect(() => {
     const handleClickOutside = ({ target }: MouseEvent) => {
@@ -35,6 +36,22 @@ export default function DatabaseSelector({}) {
     setConnecting(false);
   }, [schemaGraph]);
 
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    if (connecting) {
+      timeoutId = setTimeout(() => {
+        setConnecting(false);
+        setConnectionError(true);
+      }, 10000);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [connecting]);
+
   return (
     <>
       <SettingsForm
@@ -56,19 +73,31 @@ export default function DatabaseSelector({}) {
           onClick={() => setDbSelectionMenuOpen(!dbSelectionMenuOpen)}
         >
           <div className="flex items-center w-full">
-            {connecting ? (
-              <LoadingSpinner />
-            ) : session.currentDatabase ? (
-              <div className="h-2 w-2 rounded-full bg-green-500" />
-            ) : (
-              <div className="h-2 w-2 rounded-full bg-slate-500" />
-            )}
-            {connecting ? (
-              <p className="ml-2 truncate">Connecting to {session.currentDatabase}</p>
+            {connectionError ? (
+              <>
+                <div className="h-2 w-2 rounded-full bg-red-500" />
+                <p className="ml-2 truncate">Database connection failed</p>
+              </>
+            ) : connecting ? (
+              <>
+                <LoadingSpinner />
+                <p className="ml-2 truncate">Connecting to {session.currentDatabase}</p>
+              </>
             ) : session.currentDatabase ? (
-              <p className="ml-2 truncate">Connected DB: {session.currentDatabase}</p>
+              <>
+                <div className="h-2 w-2 rounded-full bg-green-500" />
+                <p className="ml-2 truncate">Connected DB: {session.currentDatabase}</p>
+              </>
+            ) : session.databases.length == 0 ? (
+              <>
+                <LoadingSpinner />
+                <p className="ml-2">Retrieving databases</p>
+              </>
             ) : (
-              <p className="ml-2">Select a database</p>
+              <>
+                <div className="h-2 w-2 rounded-full bg-slate-500" />
+                <p className="ml-2">Select a database</p>
+              </>
             )}
           </div>
           <ArrowDropDown />
@@ -85,8 +114,17 @@ export default function DatabaseSelector({}) {
               }}
               title="Add new database"
             >
-              <Add />
-              <p className="ml-2">Add database</p>
+              {session.databases.length == 0 ? (
+                <>
+                  <Add />
+                  <p className="ml-2">Add your first database</p>
+                </>
+              ) : (
+                <>
+                  <Add />
+                  <p className="ml-2">Add database</p>
+                </>
+              )}
             </div>
             {session.databases.map((db) => (
               <div
@@ -98,6 +136,7 @@ export default function DatabaseSelector({}) {
                     setDbSelectionMenuOpen(false);
                     setConnecting(true);
                     dispatch(updateCurrentDatabase(db.Name));
+                    setConnectionError(false);
                   } else {
                     setDbSelectionMenuOpen(false);
                   }