DocPanel: add loading indication

source/Ox.UI/js/Code/DocPanel.js

@@ -23,6 +23,7 @@ Ox.DocPanel <f> Documentation Panel
         resize <a|[128, 256, 384]> List resize positions
         runTests <b|false> If true, run tests
         selected <s|''> Id of the selected item
+        showLoading <b|false> If true, show loading icon when parsing files
         showTests <b|false> If true, show test results in list
         showTooltips <b|false> If true, show test result tooltips in list
         size <s|256> Default list size
@@ -56,6 +57,7 @@ Ox.DocPanel = function(options, self) {
             results: null,
             runTests: false,
             selected: '',
+            showLoading: false,
             showTests: false,
             showTooltips: false,
             size: 256,
@@ -112,18 +114,22 @@ Ox.DocPanel = function(options, self) {
     );
 
     if (self.options.files && self.options.files.length) {
+        setTimeout(function() {
+            self.options.showLoading && showLoadingScreen();
             self.options.files = Ox.makeArray(self.options.files);
             self.options.items = Ox.doc(self.options.files.map(function(file) {
                 return self.options.path + file;
             }), function(docItems) {
                 self.options.items = docItems;
                 getExamples(function() {
+                    self.options.showLoading && hideLoadingScreen();
                     self.$sidebar.replaceElement(1, self.$toolbar);
                     renderList();
                     self.options.runTests && runTests();
                     that.triggerEvent('load', {items: self.options.items});
                 });
             });
+        });
     } else {
         getExamples(function() {
             self.$sidebar.replaceElement(1, self.$toolbar);
@@ -219,6 +225,11 @@ Ox.DocPanel = function(options, self) {
             : 'No tests';
     }
 
+    function hideLoadingScreen() {
+        self.$loadingIcon.stop().remove();
+        self.$loadingText.remove();
+    }
+
     function parseFiles(callback) {
         var counter = 0,
             docItems = [],
@@ -357,6 +368,28 @@ Ox.DocPanel = function(options, self) {
         that.triggerEvent('select', {id: self.options.selected});
     }
 
+    function showLoadingScreen() {
+        self.$loadingIcon = Ox.LoadingIcon({size: 16})
+            .css({
+                position: 'absolute',
+                left: (self.$page.width() - self.options.size) / 2 - 8,
+                top: self.$page.height() / 2 - 20
+            })
+            .appendTo(self.$page)
+            .start();
+        self.$loadingText = $('<div>')
+            .addClass('OxLight')
+            .css({
+                position: 'absolute',
+                left: (self.$page.width() - self.options.size) / 2 - 128,
+                top: self.$page.height() / 2 + 4,
+                width: 256,
+                textAlign: 'center'
+            })
+            .html('Generating Documentation...')
+            .appendTo(self.$page);
+    }
+
     function sortByTitle(a, b) {
         var a = Ox.stripTags(a.title).toLowerCase(),
             b = Ox.stripTags(b.title).toLowerCase();