[rfc] Show readonly Editor Before Server Is Started

vscode-extension/src/aiConfigEditor.ts

@@ -62,25 +62,14 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
     _token: vscode.CancellationToken
   ): Promise<void> {
     let editorServer: ServerInfo | null = null;
+    let isWebviewDisposed = false;
 
     // TODO: saqadri - clean up console log
     //console.log(`${document.fileName}: resolveCustomTextEditor called`);
 
     // We show the extension output channel so users can see some of the server logs as they use the extension
     this.extensionOutputChannel.show(/*preserveFocus*/ true);
 
-    // Start the AIConfig editor server process.
-    editorServer = await this.startEditorServer(document);
-
-    this.aiconfigEditorManager.addEditor(
-      new AIConfigEditorState(
-        document,
-        webviewPanel,
-        editorServer,
-        this.aiconfigEditorManager
-      )
-    );
-
     // Setup initial content for the webview
     webviewPanel.webview.options = {
       enableScripts: true,
@@ -93,10 +82,7 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
         vscode.Uri.joinPath(this.context.extensionUri, "editor", "static"),
       ],
     };
-    webviewPanel.webview.html = this.getHtmlForWebview(
-      webviewPanel.webview,
-      editorServer
-    );
+    webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
 
     function updateWebview() {
       if (isWebviewDisposed) {
@@ -110,6 +96,38 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
       });
     }
 
+    // Update webview immediately so we unblock the render; server init will happen in the background.
+    updateWebview();
+
+    // Start the AIConfig editor server process. Don't await at the top level here since that blocks the
+    // webview render (which happens only when resolveCustomTextEditor returns)
+    this.startEditorServer(document).then(async (editorServer) => {
+      editorServer = editorServer;
+
+      this.aiconfigEditorManager.addEditor(
+        new AIConfigEditorState(
+          document,
+          webviewPanel,
+          editorServer,
+          this.aiconfigEditorManager
+        )
+      );
+
+      // Wait for server ready
+      await waitUntilServerReady(editorServer.url);
+
+      // Now set up the server with the latest document content
+      await this.startServerWithRetry(editorServer.url, document, webviewPanel);
+
+      // Inform the webview of the server URL
+      if (!isWebviewDisposed) {
+        webviewPanel.webview.postMessage({
+          type: "set_server_url",
+          url: editorServer.url,
+        });
+      }
+    });
+
     // Hook up event handlers so that we can synchronize the webview with the text document.
     //
     // The text document acts as our model, so we have to sync change in the document to our
@@ -123,8 +141,6 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
     // For more details, see https://code.visualstudio.com/api/extension-guides/custom-editors#synchronizing-changes-with-the-textdocument
     let isInternalDocumentChange = false;
 
-    let isWebviewDisposed = false;
-
     function updateServerWithRetry(
       serverUrl: string,
       document: vscode.TextDocument
@@ -380,9 +396,6 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
       }
     });
 
-    // Update webview immediately so we unblock the render; server init should happen in the background.
-    updateWebview();
-
     // Set initial dark/light theme mode for the webview and on theme changes. Also, on tab activation.
     if (!isWebviewDisposed) {
       updateWebviewEditorThemeMode(webviewPanel.webview);
@@ -401,20 +414,6 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
         }
       });
     }
-
-    // Wait for server ready
-    await waitUntilServerReady(editorServer.url);
-
-    // Now set up the server with the latest document content
-    await this.startServerWithRetry(editorServer.url, document, webviewPanel);
-
-    // Inform the webview of the server URL
-    if (!isWebviewDisposed) {
-      webviewPanel.webview.postMessage({
-        type: "set_server_url",
-        url: editorServer.url,
-      });
-    }
   }
 
   private startServerWithRetry(
@@ -554,10 +553,7 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
   /**
    * Get the static html used for the editor webviews.
    */
-  private getHtmlForWebview(
-    webview: vscode.Webview,
-    editorServer: ServerInfo
-  ): string {
+  private getHtmlForWebview(webview: vscode.Webview): string {
     // The JS file from the React build output
     const scriptUri = getUri(
       webview,
@@ -579,7 +575,7 @@ export class AIConfigEditorProvider implements vscode.CustomTextEditorProvider {
 	   <head>
 		 <meta charset="utf-8">
 		 <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
-		 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: http: https: 'self'; media-src data: http: https: 'self'; connect-src vscode-webview: ${editorServer.url} http: https:; style-src 'unsafe-inline' ${webview.cspSource} https://cdn.jsdelivr.net/npm/[email protected] https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css; script-src 'nonce-${nonce}' vscode-resource: https: http: https://cdn.jsdelivr.net/npm/[email protected] https://cdn.jsdelivr.net; font-src https://cdn.jsdelivr.net/npm/[email protected]/min/vs/base/browser/ui/codicons/codicon/codicon.ttf; worker-src blob:;">
+		 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data: http: https: 'self'; media-src data: http: https: 'self'; connect-src vscode-webview: http://localhost:* http: https:; style-src 'unsafe-inline' ${webview.cspSource} https://cdn.jsdelivr.net/npm/[email protected] https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css; script-src 'nonce-${nonce}' vscode-resource: https: http: https://cdn.jsdelivr.net/npm/[email protected] https://cdn.jsdelivr.net; font-src https://cdn.jsdelivr.net/npm/[email protected]/min/vs/base/browser/ui/codicons/codicon/codicon.ttf; worker-src blob:;">
 		 </head>
 	   <body>
 		 <noscript>You need to enable JavaScript to run this app.</noscript>