handle disconnected database

packages/web/src/widgets/StatusBar.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 
 import { getEngineIcon } from '../icons';
 import { useCurrentDatabase } from '../utility/globalState';
+import { useDatabaseStatus } from '../utility/metadataLoaders';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -18,6 +20,7 @@ const Item = styled.div`
 
 export default function StatusBar() {
   const { name, connection } = useCurrentDatabase() || {};
+  const status = useDatabaseStatus(connection ? { conid: connection._id, database: name } : {});
   const { displayName, server, user, engine } = connection || {};
   const EngineIcon = getEngineIcon(engine);
   return (
@@ -38,6 +41,26 @@ export default function StatusBar() {
           <i className="fas fa-user" /> {user}
         </Item>
       )}
+
+      {status && (
+        <Item>
+          {status.name == 'pending' && (
+            <>
+              <FontIcon icon="fas fa-spinner fa-spin" /> Loading
+            </>
+          )}
+          {status.name == 'ok' && (
+            <>
+              <FontIcon icon="fas fa-check-circle lime" /> Connected
+            </>
+          )}
+          {status.name == 'error' && (
+            <>
+              <FontIcon icon="fas fa-times-circle red" /> Error
+            </>
+          )}
+        </Item>
+      )}
     </Container>
   );
 }