Merge branch 'hotfix/153'

Close #153
Fix #152

CHANGELOG.md

@@ -24,6 +24,8 @@ All notable changes to this project will be documented in this file, in reverse
 
 - [#151](https://github.com/zfcampus/zf-apigility-admin-ui/pull/151) fixes responsiveness on loading api details.
 
+- [#153](https://github.com/zfcampus/zf-apigility-admin-ui/pull/153) fixes responsiveness on loading api services on sidebar.
+
 ## 1.3.11 - 2018-09-10
 
 ### Added

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>

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" +