busy indicator (#274)

* background chnage * Update extension.ts * Update package.json
SAP · May 12, 2020 · e6488a3 · e6488a3
1 parent 603d19b
commit e6488a3
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 36 deletions.
diff --git a/backend/package.json b/backend/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "yeoman-ui",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"displayName": "Application Wizard",
 	"publisher": "SAPSE",
 	"author": {
@@ -43,7 +43,7 @@
 			},
 			{
 				"command": "yeomanUI.toggleOutput",
-				"title": "Toggle Output",
+				"title": "Show Output",
 				"icon": {
 					"light": "./resources/images/icons/console_light.svg",
 					"dark": "./resources/images/icons/console_dark.svg"

diff --git a/backend/src/extension.ts b/backend/src/extension.ts
@@ -16,11 +16,14 @@ import { IChildLogger } from "@vscode-logging/logger";
 import Environment = require('yeoman-environment');
 
 const YEOMAN_UI = "Yeoman UI";
+let defaultNpmPaths: string[];
 
 export function activate(context: vscode.ExtensionContext) {
 	try {
 		// improves performance
-		Environment.createEnv();
+		// TODO: replace or remove this API
+        	// it is very slow, takes more than 2 seconds 
+		defaultNpmPaths = Environment.createEnv().getNpmPaths();
 		createExtensionLoggerAndSubscribeToLogSettingsChanges(context);
 	} catch (error) {
 		console.error("Extension activation failed due to Logger configuration failure:", error.message);
@@ -126,7 +129,7 @@ export class YeomanUIPanel {
 			vscodeYouiEvents, 
 			outputChannel, 
 			this.logger, 
-			{genFilter: this.genFilter, messages: this.messages},
+			{genFilter: this.genFilter, messages: this.messages, defaultNpmPaths},
 			_.get(vscode, "workspace.workspaceFolders[0].uri.fsPath"));
 		this.yeomanui.registerCustomQuestionEventHandler("file-browser", "getFilePath", this.showOpenFileDialog.bind(this));
 		this.yeomanui.registerCustomQuestionEventHandler("folder-browser", "getPath", this.showOpenFolderDialog.bind(this));

diff --git a/backend/src/yeomanui.ts b/backend/src/yeomanui.ts
@@ -123,9 +123,8 @@ export class YeomanUI {
       const resPath = path.join(...parts.slice(0, index + 1), YeomanUI.NODE_MODULES);
       return YeomanUI.isWin32 ? resPath : path.join(path.sep, resPath);
     });
-    // TODO: replace or remove this API
-    // it is very slow, takes more than 2 seconds 
-    const defaultPaths = env.getNpmPaths();
+
+    const defaultPaths = _.get(this.uiOptions, "defaultNpmPaths", env.getNpmPaths());
     return _.uniq(userPaths.concat(defaultPaths));
   }
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@mdi/font": "^5.1.45",
-    "@sap-devx/inquirer-gui": "0.1.11",
+    "@sap-devx/inquirer-gui": "0.1.12",
     "@sap-devx/inquirer-gui-file-browser-plugin": "0.0.5",
     "@sap-devx/inquirer-gui-folder-browser-plugin": "0.0.3",
     "@sap-devx/inquirer-gui-login-plugin": "0.0.4",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -6,10 +6,10 @@
       :height="64"
       :width="64"
       :color="isLoadingColor"
-      background-color="transparent"
+      background-color="transparent" 
       loader="spinner"
     ></loading>
-
+    
     <Header
       v-if="prompts.length"
       :headerTitle="headerTitle"
@@ -93,6 +93,7 @@ import TilesPlugin from "@sap-devx/inquirer-gui-tiles-plugin";
 
 const FUNCTION = "__Function";
 const PENDING = "pending";
+const EVALUATING = "evaluating";
 const INSTALLING = "Installing dependencies...";
 
 function initialState() {
@@ -113,7 +114,6 @@ function initialState() {
     showConsole: false,
     messages: {},
     showBusyIndicator: false,
-    transitionToggle: false,
     promptsInfoToDisplay: [],
     isReplaying: false
   };
@@ -168,7 +168,9 @@ export default {
     setBusyIndicator() {
       this.showBusyIndicator =
         _.isEmpty(this.prompts) ||
-        (this.currentPrompt && this.currentPrompt.status === PENDING && !this.isDone);
+        (this.currentPrompt 
+         && (this.currentPrompt.status === PENDING || this.currentPrompt.status === EVALUATING) 
+         && !this.isDone);
     },
     back() {
       try {
@@ -206,13 +208,15 @@ export default {
       this.promptIndex++;
       this.prompts[this.promptIndex - 1].active = false;
       this.prompts[this.promptIndex].active = true;
-      this.transitionToggle = !this.transitionToggle;
     },
     onAnswered(answers, issues) {
       this.stepValidated = issues === undefined;
       const currentPrompt = this.currentPrompt;
       if (currentPrompt) {
         currentPrompt.answers = answers;
+        if (currentPrompt.status === EVALUATING) {
+          currentPrompt.status = undefined;
+        }
       }
     },
     setPromptList(prompts) {
@@ -243,37 +247,36 @@ export default {
       }
     },
     prepQuestions(questions) {
+      if (this.currentPrompt) {
+        this.currentPrompt.status = EVALUATING;
+      }
+
       for (let question of questions) {
         for (let prop in question) {
           if (question[prop] === FUNCTION) {
             const that = this;
             question[prop] = async (...args) => {
-              let showBusy = true;
-              setTimeout(() => {
-                if (showBusy) {
-                  that.showBusyIndicator = true;
-                }
-              }, 1000);
+            if (this.currentPrompt) {
+              this.currentPrompt.status = EVALUATING;
+            }
 
-              try {
-                const response = await that.rpc.invoke("evaluateMethod", [
-                  args,
-                  question.name,
-                  prop
-                ]);
-                showBusy = false;
-                that.showBusyIndicator = false;
-
-                return response;
-              } catch(e) {
-                showBusy = false;
-                that.showBusyIndicator = false;
-                throw(e);
-              }
-            };
+            try {
+              return await that.rpc.invoke("evaluateMethod", [
+                args,
+                question.name,
+                prop
+              ]);
+            } catch(e) {
+              that.showBusyIndicator = false;
+              throw(e);
+            }};
           }
         }
       }
+
+      if (this.currentPrompt) {
+        this.currentPrompt.status = undefined;
+      }
     },
 
     async showPrompt(questions, name) {
@@ -309,7 +312,8 @@ export default {
         name: promptName,
         description: promptDescription,
         answers: {},
-        active: true
+        active: true,
+        status: _.get(this.currentPrompt, "status")
       });
       return prompt;
     },