Autocomplete suggestions UI doesn't immediately show up when returning a promise from provideCompletionItems

First off I realize this might be by design, but it seems awkward.

I’m returning a promise from provideCompletionItems() which resolves in a second or two.

What I see

During the time the promise is resolving Monaco doesn’t show the suggestions UI at all. This makes the autocomplete experience seem slow to the user.

What I expect to see

As soon as the user types I’d love to show the ‘Loading’ state of the suggestions UI until the promise resolves and I’m able to show suggestions. This way they know that something is coming.

Attempted Workarounds

I’m aware that I can trigger the command editor.action.triggerSuggest to show the loading message, but this kicks off another call to provideCompletionItems() which results in an endless loop

I can’t determine when provideCompletionItems was invoked by typing vs a trigger, since they both have the same triggerKind.

Is there an easier way to do all this? I just want to show the loading UI while a promise is outstanding and show the normal suggestions UI when it resolves.

Code repro

Here’s a minimal repro showing a promise that never resolves. The only way to see the ‘Loading’ UI is to hit control-space.

monaco.languages.registerCompletionItemProvider('json', {
    provideCompletionItems: function(model, position) {
        return new Promise(resolve => {})
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
    language: "json"
});

[cdussud]

I’ve found a workaround – manually call triggerSuggest when the editor contents change rather than relying on autocomplete to trigger itself.

Is this effectively the right way to go about this?

// To see this: slowly type hi in the editor

monaco.languages.registerCompletionItemProvider('markdown', {
    provideCompletionItems: function(model, position) {

        var word = model.getWordUntilPosition(position);
	var range = {
	  startLineNumber: position.lineNumber,
	  endLineNumber: position.lineNumber,
	  startColumn: word.startColumn,
	  endColumn: word.endColumn
	};

        return new Promise(resolve => {
          setTimeout(() => { resolve({suggestions: [{
                    label: "hi",
                    insertText: "hello",
                    kind: 0,
                    range
           }]}) }, 1000)
        })
    }
});

const editor = monaco.editor.create(document.getElementById("container"), {
    value: "# Hello\n",
    language: "markdown",
    wordBasedSuggestions: false,
    quickSuggestions: false
},);

editor.onDidChangeModelContent((event) => {
  editor.trigger('', 'editor.action.triggerSuggest');  
});

[cdussud]

For my own use case I’m not sure if I agree that this is the best default.

If we’re using a promise for completions then it means that it’s async and prob takes a second to return. That’s unavoidable. So given that reality, a fast typing person will never see anything until they pause and let the autocomplete catch up. In that case is it best for them to see ‘loading’ so they know that at least something is going to happen? Or best to see nothing, and feel like autocomplete isn’t working at all?

I suppose there are arguments for either side (I’m sure VS Code doesn’t do the loading thing) but it would be nice to have the option to show loading configurable somewhere.