Optimistically update the UI when user selects db/list (#2063)

Author: charisk

extensions/ql-vscode/src/databases/ui/db-panel.ts

@@ -254,6 +254,11 @@ export class DbPanel extends DisposableObject {
         "Not a selectable database item. Please select a valid item.",
       );
     }
+
+    // Optimistically update the UI to select the item that the user
+    // selected to avoid delay in the UI.
+    this.dataProvider.updateSelectedItem(treeViewItem);
+
     await this.dbManager.setSelectedDbItem(treeViewItem.dbItem);
   }
 

extensions/ql-vscode/src/databases/ui/db-tree-data-provider.ts

@@ -48,6 +48,23 @@ export class DbTreeDataProvider
     });
   }
 
+  /**
+   * Updates the selected item and re-renders the tree.
+   * @param selectedItem The item to select.
+   */
+  public updateSelectedItem(selectedItem: DbTreeViewItem): void {
+    // Unselect all items
+    for (const item of this.dbTreeItems) {
+      item.setAsUnselected();
+    }
+
+    // Select the new item
+    selectedItem.setAsSelected();
+
+    // Re-render the tree
+    this._onDidChangeTreeData.fire(undefined);
+  }
+
   /**
    * Called when expanding a node (including the root node).
    * @param node The node to expand.

extensions/ql-vscode/src/databases/ui/db-tree-view-item.ts

@@ -36,11 +36,19 @@ export class DbTreeViewItem extends vscode.TreeItem {
     if (dbItem) {
       this.contextValue = getContextValue(dbItem);
       if (isSelectableDbItem(dbItem) && dbItem.selected) {
-        // Define the resource id to drive the UI to render this item as selected.
-        this.resourceUri = vscode.Uri.parse(SELECTED_DB_ITEM_RESOURCE_URI);
+        this.setAsSelected();
       }
     }
   }
+
+  public setAsSelected(): void {
+    // Define the resource id to drive the UI to render this item as selected.
+    this.resourceUri = vscode.Uri.parse(SELECTED_DB_ITEM_RESOURCE_URI);
+  }
+
+  public setAsUnselected(): void {
+    this.resourceUri = undefined;
+  }
 }
 
 function getContextValue(dbItem: DbItem): string | undefined {