diff --git a/platform/commonUI/general/res/templates/tree/wait-node.html b/platform/commonUI/general/res/templates/tree/wait-node.html new file mode 100644 index 0000000000..79dffa73b5 --- /dev/null +++ b/platform/commonUI/general/res/templates/tree/wait-node.html @@ -0,0 +1,27 @@ + +
  • + + + Loading... + +
  • diff --git a/platform/commonUI/general/src/ui/TreeView.js b/platform/commonUI/general/src/ui/TreeView.js index b1e9e6398e..b09256388d 100644 --- a/platform/commonUI/general/src/ui/TreeView.js +++ b/platform/commonUI/general/src/ui/TreeView.js @@ -23,8 +23,9 @@ define([ 'zepto', - './TreeNodeView' -], function ($, TreeNodeView) { + './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);