feat(vscode): show loading UI while waiting for Preview.js server to …

…spin up
fwouts · Nov 29, 2023 · 342686e · 342686e
1 parent 0128367
commit 342686e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 23 deletions.
diff --git a/integrations/vscode/src/index.ts b/integrations/vscode/src/index.ts
@@ -4,6 +4,7 @@ import { closePreviewPanel, updatePreviewPanel } from "./preview-panel.js";
 import {
   ensurePreviewServerStarted,
   ensurePreviewServerStopped,
+  isPreviewServerRunning,
 } from "./preview-server.js";
 import { createState } from "./state.js";
 
@@ -204,44 +205,64 @@ export async function activate({ subscriptions }: vscode.ExtensionContext) {
         id = undefined;
       }
       const editor = vscode.window.activeTextEditor;
+      let textDocument: vscode.TextDocument;
       if (!document?.fileName) {
         if (editor?.document) {
-          document = editor.document;
+          textDocument = editor.document;
         } else {
           vscode.window.showErrorMessage("No document selected.");
           return;
         }
+      } else {
+        textDocument = document;
       }
-      const crawlFileResponse = await state.crawlFile(document);
+
+      const crawlFileResponse = await state.crawlFile(textDocument);
       if (!crawlFileResponse.rootDir) {
         vscode.window.showErrorMessage(
-          `No compatible workspace detected from ${document.fileName}`
+          `No compatible workspace detected from ${textDocument.fileName}`
         );
         return;
       }
-      if (id === undefined) {
-        const offset = editor?.selection.active
-          ? document.offsetAt(editor.selection.active)
-          : 0;
-        const previewable =
-          crawlFileResponse.previewables.find(
-            (c) => offset >= c.start && offset <= c.end
-          ) || crawlFileResponse.previewables[0];
-        if (!previewable) {
-          vscode.window.showErrorMessage(
-            `No component or story was found at offset ${offset}`
+
+      vscode.window.withProgress(
+        {
+          location: isPreviewServerRunning(state, crawlFileResponse.rootDir)
+            ? vscode.ProgressLocation.Window
+            : vscode.ProgressLocation.Notification,
+          cancellable: true,
+          title: "Spinning up Preview.js",
+        },
+        async (_progress, cancellationToken) => {
+          if (id === undefined) {
+            const offset = editor?.selection.active
+              ? textDocument.offsetAt(editor.selection.active)
+              : 0;
+            const previewable =
+              crawlFileResponse.previewables.find(
+                (c) => offset >= c.start && offset <= c.end
+              ) || crawlFileResponse.previewables[0];
+            if (!previewable) {
+              vscode.window.showErrorMessage(
+                `No component or story was found at offset ${offset}`
+              );
+              return;
+            }
+            id = previewable.id;
+          }
+          const preview = await ensurePreviewServerStarted(
+            state,
+            crawlFileResponse.rootDir
           );
-          return;
+          if (cancellationToken.isCancellationRequested) {
+            await ensurePreviewServerStopped(state);
+            return;
+          }
+          runningServerStatusBarItem.text = `🟢 Preview.js running at ${preview.url}`;
+          runningServerStatusBarItem.show();
+          updatePreviewPanel(state, preview.url, id, onError);
         }
-        id = previewable.id;
-      }
-      const preview = await ensurePreviewServerStarted(
-        state,
-        crawlFileResponse.rootDir
       );
-      runningServerStatusBarItem.text = `🟢 Preview.js running at ${preview.url}`;
-      runningServerStatusBarItem.show();
-      updatePreviewPanel(state, preview.url, id, onError);
     })
   );
 

diff --git a/integrations/vscode/src/preview-server.ts b/integrations/vscode/src/preview-server.ts
@@ -2,11 +2,19 @@ import { exclusivePromiseRunner } from "exclusive-promises";
 import type { PreviewJsState } from "./state.js";
 
 const locking = exclusivePromiseRunner();
+
+export function isPreviewServerRunning(state: PreviewJsState, rootDir: string) {
+  // Note: keep this in sync with the check in ensurePreviewServerStarted().
+  return state.currentPreview?.rootDir === rootDir;
+}
+
 export async function ensurePreviewServerStarted(
   state: PreviewJsState,
   rootDir: string
 ) {
   return locking(async () => {
+    // Note: keep this in sync with isPreviewServerRunning().
+    // This is inlined because it allows TypeScript to keep more type information.
     if (state.currentPreview?.rootDir !== rootDir) {
       if (state.currentPreview) {
         await state.client.stopPreview({