Make Settings UI's StartScreen only fully reload configs when clicking Reload

CHANGELOG.md

@@ -33,6 +33,9 @@
 - Add a new `extend` config option that allows a config to extend one or more other configs (#268)
   - The extension will automatically detect and report missing or cyclic dependencies, skipping them
   - Note that if a config tries to extend a non-existing config, it will be skipped and an error will also be shown
+- Start screen of Settings UI will use the cached list of configs instead of reloading them
+  - This should make navigating to the start screen (especially when navigating back and forth between configs) faster
+  - The Refresh button is now renamed to Reload and will still reload the configs (from disk, remote workspaces, ...)
 
 ### Development changes
 

common/src/webviewMessages.ts

@@ -4,6 +4,7 @@ import type { ConfigLocation, FileSystemConfig } from './fileSystemConfig';
 
 export interface RequestDataMessage {
   type: 'requestData';
+  reload?: boolean;
 }
 export interface ResponseDataMessage {
   type: 'responseData';

src/webview.ts

@@ -4,8 +4,8 @@ import type { Message, Navigation } from 'common/webviewMessages';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as vscode from 'vscode';
-import { deleteConfig, loadConfigs, updateConfig } from './config';
+import { deleteConfig, getConfigs, loadConfigs, updateConfig } from './config';
-import { DEBUG, Logging as _Logging, LOGGING_NO_STACKTRACE } from './logging';
+import { DEBUG, LOGGING_NO_STACKTRACE, Logging as _Logging } from './logging';
 import { toPromise } from './utils';
 
 const Logging = _Logging.scope('WebView');
@@ -89,7 +89,7 @@ async function handleMessage(message: Message): Promise<any> {
   }
   switch (message.type) {
     case 'requestData': {
-      const configs = await loadConfigs();
+      const configs = await (message.reload ? loadConfigs : getConfigs)();
       const locations = getLocations(configs);
       return postMessage({
         configs, locations,

webview/src/Startscreen.tsx

@@ -12,7 +12,7 @@ interface StateProps {
     groupBy: string;
 }
 interface DispatchProps {
-    refresh(): void;
+    refresh(reload?: boolean): void;
     changeGroupBy(current: string): void;
     add(): void;
 }
@@ -26,7 +26,7 @@ class Startscreen extends React.Component<StateProps & DispatchProps> {
         const nextGroupBy = this.props.groupBy === 'group' ? 'location' : 'group';
         return <div className="Homescreen">
             <h2>Configurations</h2>
-            <button onClick={this.props.refresh}>Refresh</button>
+            <button onClick={this.reload}>Reload</button>
             <button onClick={this.props.add}>Add</button>
             <button onClick={this.changeGroupBy}>Sort by {nextGroupBy}</button>
             {grouped.map(([loc, configs]) => this.createGroup(loc, configs))}
@@ -39,7 +39,8 @@ class Startscreen extends React.Component<StateProps & DispatchProps> {
             <ConfigList configs={configs} />
         </div>;
     }
-    public changeGroupBy = () => this.props.changeGroupBy(this.props.groupBy);
+    protected reload = () => this.props.refresh(true);
+    protected changeGroupBy = () => this.props.changeGroupBy(this.props.groupBy);
 }
 
 export default connect(Startscreen)<StateProps, DispatchProps>(
@@ -50,9 +51,9 @@ export default connect(Startscreen)<StateProps, DispatchProps>(
     dispatch => ({
         add: () => dispatch(openNewConfig()),
         changeGroupBy: (current: string) => dispatch(openStartScreen(current === 'group' ? 'location' : 'group')),
-        refresh: () => {
+        refresh: (reload?: boolean) => {
             dispatch(receivedData([], []));
-            API.postMessage({ type: 'requestData' });
+            API.postMessage({ type: 'requestData', reload });
         },
     }),
 );