How to implement a busy indicator in vscode?

Question

For a long running process I'd like to show a busy indicator in Visual Studio Code. It would already be enough to have something like the typescript extension uses:

However using a normal status bar item doesn't work as expected. I cannot even show the item right before I start the operation, because it seems to require returning control to vscode for that.

What I have tried is this:

...
busyIndicator = window.createStatusBarItem(StatusBarAlignment.Left, 1000);
busyIndicator.text = "##";
busyIndicator.show();

...

workspace.onDidSaveTextDocument((doc: TextDocument) => {
    if (doc.languageId === "antlr") {
        //busyIndicator.show();
        busyIndicator.text = "X";
        let tempPath = Utils.createTempFolder();
        let result = backend.generate(doc.fileName, { outputDir: tempPath, listeners: false, visitors: false });
        Utils.deleteFolderRecursive(tempPath);
        //busyIndicator.hide();
        busyIndicator.text = "Y";
    }
});

The value X is never shown and Y comes up when the operation is over (as expected). If not even a simple text update works, how can I even show an animation?

Answer 1

I wasn't able to figure out when support for using withProgress in the status bar was added, but I can do the following today.

Edit I found when the support for this was added, it was April 2017. See vscode release notes here

 vscode.window.withProgress({
    location: vscode.ProgressLocation.Window,
    cancellable: false,
    title: 'Loading customers'
}, async (progress) => {
    
    progress.report({  increment: 0 });

    await Promise.resolve();

    progress.report({ increment: 100 });
});

See it in action in the following image