feat: show loader while comparing

package.json

@@ -2,7 +2,7 @@
   "name": "compare-folders",
   "displayName": "Compare Folders",
   "description": "Compare folders by contents, present the files that have differences and display the diffs side by side",
-  "version": "0.22.2",
+  "version": "0.23.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/moshfeu/vscode-compare-folders"
@@ -246,6 +246,7 @@
       {
         "title": "Compare Folders: Pick from recent compares",
         "command": "foldersCompare.pickFromRecentCompares",
+        "enablement": "!foldersCompareContext.isComparing",
         "icon": {
           "dark": "resources/dark/history.svg",
           "light": "resources/light/history.svg"
@@ -278,19 +279,22 @@
       {
         "title": "Choose Folders And Compare",
         "command": "foldersCompare.chooseFoldersAndCompare",
-        "enablement": "false"
+        "enablement": "!foldersCompareContext.isComparing"
       },
       {
         "title": "Compare Folders: Compare a folder against workspace",
-        "command": "foldersCompare.compareFoldersAgainstWorkspace"
+        "command": "foldersCompare.compareFoldersAgainstWorkspace",
+        "enablement": "!foldersCompareContext.isComparing"
       },
       {
         "title": "Compare Folders: Choose 2 folders and compare",
-        "command": "foldersCompare.compareFoldersAgainstEachOther"
+        "command": "foldersCompare.compareFoldersAgainstEachOther",
+        "enablement": "!foldersCompareContext.isComparing"
       },
       {
         "title": "Refresh",
         "command": "foldersCompare.refresh",
+        "enablement": "!foldersCompareContext.isComparing",
         "icon": {
           "light": "resources/light/refresh.svg",
           "dark": "resources/dark/refresh.svg"
@@ -299,14 +303,16 @@
       {
         "title": "Swap Sides",
         "command": "foldersCompare.swap",
+        "enablement": "!foldersCompareContext.isComparing",
         "icon": {
           "light": "resources/light/swap.svg",
           "dark": "resources/dark/swap.svg"
         }
       },
       {
         "command": "foldersCompare.compareSelectedFolders",
-        "title": "[Compare Folders] Compare selected folders"
+        "title": "[Compare Folders] Compare selected folders",
+        "enablement": "!foldersCompareContext.isComparing"
       }
     ],
     "viewsContainers": {
@@ -363,7 +369,7 @@
     "mocha": "^6.1.4",
     "tslint": "^5.12.1",
     "typescript": "^3.3.1",
-    "vsce": "^1.88.0",
+    "vsce": "^2.10.0",
     "vscode-test": "^1.0.2"
   },
   "dependencies": {

src/constants/contextKeys.ts

@@ -1 +1,6 @@
-export const HAS_FOLDERS = 'foldersCompareContext.hasFolders';
+export const contextKeys = {
+  HAS_FOLDERS: 'foldersCompareContext.hasFolders',
+  IS_COMPARING: 'foldersCompareContext.isComparing',
+} as const;
+
+export type ContextKey = typeof contextKeys[keyof typeof contextKeys];

src/context/global.ts

@@ -1,5 +1,6 @@
 import { commands } from 'vscode';
+import { ContextKey } from '../constants/contextKeys';
 
-export const setContext = (key: string, value: string | boolean): void => {
+export const setContext = (key: ContextKey, value: string | boolean): void => {
   commands.executeCommand('setContext', key, value);
 };

src/providers/foldersCompareProvider.ts

@@ -28,7 +28,7 @@ import { getRelativePath } from '../utils/path';
 import { ViewOnlyProvider } from './viewOnlyProvider';
 import { getConfiguration } from '../services/configuration';
 import { setContext } from '../context/global';
-import { HAS_FOLDERS } from '../constants/contextKeys';
+import { contextKeys } from '../constants/contextKeys';
 import { log } from '../services/logger';
 import { showErrorMessageWithMoreInfo, showInfoMessageWithTimeout } from '../utils/ui';
 import { showUnaccessibleWarning } from '../services/validators';
@@ -71,18 +71,10 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
   };
 
   chooseFoldersAndCompare = async (ignoreWorkspace = false) => {
-    await window.withProgress(
-      {
-        location: ProgressLocation.Notification,
-        title: `Compare folders...`,
-      },
-      async () => {
-        this.handleDiffResult(
-          await chooseFoldersAndCompare(
-            ignoreWorkspace ? undefined : await this.getWorkspaceFolder()
-          )
-        );
-      }
+    this.handleDiffResult(
+      await chooseFoldersAndCompare(
+        ignoreWorkspace ? undefined : await this.getWorkspaceFolder()
+      )
     );
   };
 
@@ -94,7 +86,7 @@ export class CompareFoldersProvider implements TreeDataProvider<File> {
     await this.updateUI();
     this.warnUnaccessiblePaths()
     commands.executeCommand('foldersCompareAppService.focus');
-    setContext(HAS_FOLDERS, true);
+    setContext(contextKeys.HAS_FOLDERS, true);
   }
 
   warnUnaccessiblePaths() {

src/services/comparer.ts

@@ -1,4 +1,4 @@
-import { commands, Uri, extensions, window } from 'vscode';
+import { commands, Uri, extensions, window, ProgressLocation } from 'vscode';
 import { compare, Difference, fileCompareHandlers } from 'dir-compare';
 import { openFolder } from './openFolder';
 import * as path from 'path';
@@ -7,20 +7,20 @@ import { pathContext } from '../context/path';
 import { compareIgnoredExtension, compareName, validate } from './ignoreExtensionTools';
 import { CompareOptions } from '../types';
 import { log } from './logger';
-import { showErrorMessage } from '../utils/ui';
+import { createProgressBar, showErrorMessage } from '../utils/ui';
 import { validatePermissions } from './validators';
+import { setContext } from '../context/global';
+import { contextKeys } from '../constants/contextKeys';
 
 const diffMergeExtension = extensions.getExtension('moshfeu.diff-merge');
 
 export async function chooseFoldersAndCompare(path?: string) {
+  const progress = createProgressBar('Waiting for folders to be chosen...');
   const folder1Path: string = path || (await openFolder());
   const folder2Path = await openFolder();
-
-  if (!folder1Path || !folder2Path) {
-    return;
-  }
-
   pathContext.setPaths(folder1Path, folder2Path);
+  await progress.done();
+
   return compareFolders();
 }
 
@@ -106,13 +106,15 @@ function getOptions() {
 }
 
 export async function compareFolders(): Promise<CompareResult> {
+  const progress = createProgressBar('Comparing your folders, hang on...');
+  setContext(contextKeys.IS_COMPARING, true);
   const emptyResponse = () => Promise.resolve(new CompareResult([], [], [], [], [], '', ''));
   try {
     if (!validate()) {
       return emptyResponse();
     }
     const [folder1Path, folder2Path] = pathContext.getPaths();
-    validatePermissions(folder1Path, folder2Path);
+    await validatePermissions(folder1Path, folder2Path);
     const showIdentical = getConfiguration('showIdentical');
     const options = getOptions();
     // compare folders by contents
@@ -154,6 +156,9 @@ export async function compareFolders(): Promise<CompareResult> {
     log('error while comparing', error);
     showErrorMessage('Oops, something went wrong while comparing', error);
     return emptyResponse();
+  } finally {
+    await progress.done();
+    setContext(contextKeys.IS_COMPARING, false);
   }
 }
 

src/services/sleep.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number = 1000) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

src/services/validators.ts

@@ -6,7 +6,7 @@ import { resourceExists } from './fs';
 const NOT_ACCESSIBLE = 'is not accessible';
 
 export async function validatePermissions(path1: string, path2: string) {
-  if (validatePath(path1)) {
+  if (await validatePath(path1)) {
     validatePath(path2);
   }
 }

src/utils/ui.ts

@@ -1,8 +1,11 @@
-import { window, ProgressLocation, env, Uri, version } from 'vscode';
+import { window, ProgressLocation, env, Uri, version, Progress } from 'vscode';
 import { join } from 'path';
 import { readFileSync } from 'fs';
 import os from 'os';
 import { log } from '../services/logger';
+import { sleep } from '../services/sleep';
+
+type ProgressTaskData = { message: string; increment?: number };
 
 export function showInfoMessageWithTimeout(message: string, timeout: number = 3000) {
   const upTo = timeout / 10;
@@ -70,6 +73,29 @@ export async function showErrorMessageWithMoreInfo(message: string, link: string
   }
 }
 
+export function createProgressBar(message: string) {
+  let progress: Progress<ProgressTaskData> & { done: (message?: string, timeout?: number) => Promise<void> };
+
+  window.withProgress(
+    {
+      location: ProgressLocation.Notification,
+      title: message,
+    },
+    async (_progress) => {
+      return new Promise<void>((resolve) => {
+        progress = {
+          report: (data: ProgressTaskData) => _progress.report(data),
+          done: async () => {
+            await sleep();
+            resolve();
+          },
+        };
+      });
+    }
+  );
+  return progress!;
+}
+
 function getExtensionVersion() {
   const { version: extVersion } = JSON.parse(
     readFileSync(join(__dirname, '..', 'package.json'), { encoding: 'utf8' })