fix(userFeedbackDBLoading): added extra user feedback to db loading

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

@@ -5,6 +5,7 @@ import { updateCurrentDatabase } from '@graphpolaris/shared/lib/data-access/stor
 import { SettingsForm } from './forms/settings';
 import { NewDatabaseForm } from './forms/AddDatabase/newdatabase';
 import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
+import { addError } from '@graphpolaris/shared/lib/data-access/store/configSlice';
 
 export default function DatabaseSelector({}) {
   const dispatch = useAppDispatch();
@@ -17,7 +18,7 @@ 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);
 
   useEffect(() => {
     const handleClickOutside = ({ target }: MouseEvent) => {
@@ -35,6 +36,23 @@ export default function DatabaseSelector({}) {
     setConnecting(false);
   }, [schemaGraph]);
 
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+    if (connecting) {
+      timeoutId = setTimeout(() => {
+        dispatch(addError("Couldn't establish connection"));
+        setConnecting(false);
+        dispatch(updateCurrentDatabase(''));
+      }, 10000);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [connecting]);
+
   return (
     <>
       <SettingsForm
@@ -57,18 +75,25 @@ export default function DatabaseSelector({}) {
         >
           <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>
+              <>
+                <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 +110,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