[Tree] Add wait spinner

platform/commonUI/general/res/templates/tree/wait-node.html

@@ -0,0 +1,27 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<li>
+    <span class="tree-item">
+        <span class="icon wait-spinner"></span>
+        <span class="title-label">Loading...</span>
+    </span>
+</li>

platform/commonUI/general/src/ui/TreeView.js

@@ -23,8 +23,9 @@
 
 define([
     'zepto',
-    './TreeNodeView'
+    './TreeNodeView',
-], function ($, TreeNodeView) {
+    'text!../../res/templates/tree/wait-node.html'
+], function ($, TreeNodeView, spinnerTemplate) {
     'use strict';
 
     function TreeView(gestureService, selectFn) {
@@ -33,6 +34,7 @@ define([
         this.callbacks = [];
         this.selectFn = selectFn || this.value.bind(this);
         this.gestureService = gestureService;
+        this.pending = false;
     }
 
     TreeView.prototype.newTreeView = function () {
@@ -66,6 +68,12 @@ define([
         }
 
         function addNodes(domainObjects) {
+            if (self.pending) {
+                self.pending = false;
+                self.nodeViews = [];
+                self.ul.empty();
+            }
+
             if (domainObject === self.activeObject) {
                 self.setSize(domainObjects.length);
                 domainObjects.forEach(addNode);
@@ -73,7 +81,6 @@ define([
             }
         }
 
-        // TODO: Add pending indicator
         domainObject.useCapability('composition')
             .then(addNodes);
     };
@@ -87,6 +94,8 @@ define([
         this.ul.empty();
 
         if (domainObject && domainObject.hasCapability('composition')) {
+            this.pending = true;
+            this.ul.append($(spinnerTemplate));
             this.unlisten = domainObject.getCapability('mutation')
                 .listen(this.loadComposition.bind(this));
             this.loadComposition(domainObject);