Merge pull request #153 from saulotoledo/improve_sidebar_responsiveness

Improve services loading responsiveness (sidebar)
zfcampus · Nov 24, 2019 · d6b04bf · d6b04bf
2 parents 12d496e + 6e8d238
commit d6b04bf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/apigility-ui/sidebar/sidebar.html b/src/apigility-ui/sidebar/sidebar.html
@@ -41,12 +41,16 @@
       <ol class="ng-scope ng-pristine ng-valid angular-ui-tree-nodes" ng-class="{hidden: collapsed}">
         <li class="ng-scope angular-ui-tree-node" ng-repeat="subItem in item.rest track by $index">
           <div class="ng-scope ng-binding angular-ui-tree-handle" ui-tree-handle ng-class="{ 'selected' : 'api'+item.name+'rest'+subItem.service_name === vm.getSelected() }">
-            <span class="glyphicon glyphicon-leaf"></span> <a ui-sref="ag.rest({api: item.name, ver: item.selected_version, rest: subItem.controller_service_name})" ng-click="vm.setSelected('api'+item.name+'rest'+subItem.service_name)">{{subItem.service_name}}</a>
+            <span class="glyphicon glyphicon-leaf"></span>
+            <span ng-if="!subItem.service_name">{{subItem}} <img src="apigility-ui/img/spinning.gif"></span>
+            <a ui-sref="ag.rest({api: item.name, ver: item.selected_version, rest: subItem.controller_service_name})" ng-click="vm.setSelected('api'+item.name+'rest'+subItem.service_name)">{{subItem.service_name}}</a>
           </div>
         </li>
         <li class="ng-scope angular-ui-tree-node" ng-repeat="subItem in item.rpc track by $index">
           <div class="ng-scope ng-binding angular-ui-tree-handle" ui-tree-handle ng-class="{ 'selected' : 'api'+item.name+'rpc'+subItem.service_name === vm.getSelected() }">
-            <span class="glyphicon glyphicon-fire"></span> <a ui-sref="ag.rpc({api: item.name, ver: item.selected_version, rpc: subItem.controller_service_name})" ng-click="vm.setSelected('api'+item.name+'rpc'+subItem.service_name)">{{subItem.service_name}}</a>
+            <span class="glyphicon glyphicon-fire"></span>
+            <span ng-if="!subItem.service_name">{{subItem}} <img src="apigility-ui/img/spinning.gif"></span>
+            <a ui-sref="ag.rpc({api: item.name, ver: item.selected_version, rpc: subItem.controller_service_name})" ng-click="vm.setSelected('api'+item.name+'rpc'+subItem.service_name)">{{subItem.service_name}}</a>
           </div>
         </li>
       </ol>

diff --git a/src/apigility-ui/templates.js b/src/apigility-ui/templates.js
@@ -2688,12 +2688,16 @@ angular.module("apigility-ui/sidebar/sidebar.html", []).run(["$templateCache", f
     "      <ol class=\"ng-scope ng-pristine ng-valid angular-ui-tree-nodes\" ng-class=\"{hidden: collapsed}\">\n" +
     "        <li class=\"ng-scope angular-ui-tree-node\" ng-repeat=\"subItem in item.rest track by $index\">\n" +
     "          <div class=\"ng-scope ng-binding angular-ui-tree-handle\" ui-tree-handle ng-class=\"{ 'selected' : 'api'+item.name+'rest'+subItem.service_name === vm.getSelected() }\">\n" +
-    "            <span class=\"glyphicon glyphicon-leaf\"></span> <a ui-sref=\"ag.rest({api: item.name, ver: item.selected_version, rest: subItem.controller_service_name})\" ng-click=\"vm.setSelected('api'+item.name+'rest'+subItem.service_name)\">{{subItem.service_name}}</a>\n" +
+    "            <span class=\"glyphicon glyphicon-leaf\"></span>\n" +
+    "            <span ng-if=\"!subItem.service_name\">{{subItem}} <img src=\"apigility-ui/img/spinning.gif\"></span>\n" +
+    "            <a ui-sref=\"ag.rest({api: item.name, ver: item.selected_version, rest: subItem.controller_service_name})\" ng-click=\"vm.setSelected('api'+item.name+'rest'+subItem.service_name)\">{{subItem.service_name}}</a>\n" +
     "          </div>\n" +
     "        </li>\n" +
     "        <li class=\"ng-scope angular-ui-tree-node\" ng-repeat=\"subItem in item.rpc track by $index\">\n" +
     "          <div class=\"ng-scope ng-binding angular-ui-tree-handle\" ui-tree-handle ng-class=\"{ 'selected' : 'api'+item.name+'rpc'+subItem.service_name === vm.getSelected() }\">\n" +
-    "            <span class=\"glyphicon glyphicon-fire\"></span> <a ui-sref=\"ag.rpc({api: item.name, ver: item.selected_version, rpc: subItem.controller_service_name})\" ng-click=\"vm.setSelected('api'+item.name+'rpc'+subItem.service_name)\">{{subItem.service_name}}</a>\n" +
+    "            <span class=\"glyphicon glyphicon-fire\"></span>\n" +
+    "            <span ng-if=\"!subItem.service_name\">{{subItem}} <img src=\"apigility-ui/img/spinning.gif\"></span>\n" +
+    "            <a ui-sref=\"ag.rpc({api: item.name, ver: item.selected_version, rpc: subItem.controller_service_name})\" ng-click=\"vm.setSelected('api'+item.name+'rpc'+subItem.service_name)\">{{subItem.service_name}}</a>\n" +
     "          </div>\n" +
     "        </li>\n" +
     "      </ol>\n" +