StevenDevooght / tinyMCE-mention

Mention/Autocomplete plugin for tinyMCE WYSIWYG editor.
http://stevendevooght.github.io/tinyMCE-mention/
220 stars 95 forks source link

Render feedback to inform user source is loading #4

Closed aggied closed 10 years ago

aggied commented 10 years ago

Great plugin-- I have spent the last 20 minutes looking over the source but realized since there is one contributor you will probably be able to quickly point me in the right direction--

My source for the mention is coming from an ajax request, so it takes a couple seconds to get the first results. During this time the user has no feedback that the system is searching for suggestions. I'd like to be able to render some sort of feedback to the user that it is loading.

I thought what would be easiest is to render the < ul > immediately (assuming the lookup function?) and put a typical loading gif in there until the results come.

Thoughts? I'd be more than happy to fork and help out on this-- just thought I'd get your input as a time saver.

StevenDevooght commented 10 years ago

Thanks for the feedback.

For the end user the loading indicator would indeed be a nice improvement.

I think the easiest way to implement this behavior is to add a loading 'li' tag to the default renderDropdown method.

renderDropdown: function () {
    return '<ul class="rte-autocomplete dropdown-menu"><li class="loading"></li></ul>';
}

Calling the 'show' method in the lookup method instead of the 'process' method should render the dropdown just in time.

The last step is to remove the display: none rule in the autocomplete.css file.

I'll be happy to merge your change into our codebase.