How to show a wait message or loading image when loading data in Umbraco's Admin custom grid editor?

Question

I created a custom grid plugin for the Umbraco Back Office (or Admin) but before I save the selected item I want to get the content by ID and save off a property. This get call takes a little longer than expected and since it is using a promise, I was hoping there was a way for me to notify the user that there is some data being loaded.

I found this custom directive plugin for AngularJS but I am not sure the best way to wire it up into the Umbraco Admin UI. Also I assumed there would be a standard way to notify the user that an operation is taking place and to not leave this page or click submit again until it is done.

Does anyone have any ideas the best practice to use to notify the user in the Umbraco Admin that something is loading?

Here is some of my code from my plugin's controller:

dialogService.treePicker({
    multiPicker: false,
    treeAlias: 'content',
    section: 'content',
    startNodeId: startNodeIdValue,
    callback: function (data) {

        notificationsService.info("Success", "Selected " + data.name + " (" + data.id + ").");

        //TODO: need a good way to show a loading/wait message 
        //      until the promise is finished

        //this might work but want to use the umbraco admin way 
        //to show a loading / wait message
        $scope.loading = true;

        contentResource.getById(data.id).then(function (content) {
            var icon = content.icon;

            $scope.control.value = {
                id: data.id,
                name: data.name,
                path: data.path,
                icon: icon
            };

            //this might work but want to use the umbraco admin way 
            //to show a loading / wait message
            $scope.loading = false;

            $scope.setPreview();
        });
    }
});

Answer 1

Our Solution

I found the directive that Umbraco uses called umb-load-indicator and it works; however, I'm still curious if someone has a better solution.

Right now here is what my view looks like using the $scope.loading value.

<div ng-controller="MyController">
    <div style="height: 25px;" ng-if="loading">
        <umb-load-indicator></umb-load-indicator>
    </div>
    <div ng-class="usky-editor-placeholder" ng-if="!loading">
        <!-- main content goes here -->
    </div>
</div>

Please let me know if you have a better solution.