data source disappear from site data during loading and when there is a loading error

Author: lexoyo

src/storage.ts

@@ -26,8 +26,6 @@ export default (editor: Editor) => {
     const newDataSources: IDataSource[] = (data.dataSources || [] as GraphQLOptions[])
       .map((ds: GraphQLOptions) => new GraphQL(ds))
 
-    await Promise.all(newDataSources.map((ds: IDataSource) => ds.connect()))
-
     // Get all data sources
     const dataSources = getAllDataSources()
       // Keep only data sources from the config
@@ -37,10 +35,10 @@ export default (editor: Editor) => {
     resetDataSources(dataSources)
 
     // Add the new data sources
-    await Promise.all(newDataSources.map(ds => {
+    newDataSources.forEach(ds => {
       addDataSource(ds)
-      return ds.connect()
-    }))
+    })
+
     refreshDataSources()
   })
 }

src/view/settings.ts

@@ -548,6 +548,7 @@ class DataSourceCard extends LitElement {
 
   private loadingIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3"><animate attributeName="r" values="3;8;3" dur="1s" repeatCount="indefinite"/><animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/></circle></svg>`
   private connectedIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`
+  private errorIcon = html`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`
 
   constructor() {
     super()
@@ -598,6 +599,9 @@ class DataSourceCard extends LitElement {
       .ds-card__status--loading {
         color: var(--ds-highlight);
       }
+      .ds-card__status--error {
+        color: var(--ds-highlight);
+      }
       .ds-card__actions {
         display: flex;
         gap: 8px;
@@ -649,7 +653,11 @@ class DataSourceCard extends LitElement {
             <div class="ds-card__status ds-card__status--connected">
               ${this.connectedIcon} Connected
             </div>
-          ` : ''}
+          ` : html`
+            <div class="ds-card__status ds-card__status--error">
+              ${this.errorIcon} Not connected
+            </div>
+          `}
         </div>
         <div class="ds-card__actions">
           <button