MOBILE-1318 delegates: Show loading while addons are being loaded

Author: dpalou

www/core/components/courses/controllers/list.js

@@ -25,6 +25,7 @@ angular.module('mm.core.courses')
             mmCoursesEventMyCoursesUpdated) {
 
     $scope.searchEnabled = $mmCourses.isSearchCoursesAvailable();
+    $scope.areNavHandlersLoadedFor = $mmCoursesDelegate.areNavHandlersLoadedFor;
 
     // Convenience function to fetch courses.
     function fetchCourses(refresh) {

www/core/components/courses/services/delegate.js

@@ -60,10 +60,24 @@ angular.module('mm.core.courses')
     self.$get = function($mmUtil, $q, $log, $mmSite) {
         var enabledNavHandlers = {},
             coursesHandlers = {},
-            self = {};
+            self = {},
+            loaded = {};
 
         $log = $log.getInstance('$mmCoursesDelegate');
 
+        /**
+         * Check if addons are loaded for a certain course.
+         *
+         * @module mm.core.courses
+         * @ngdoc method
+         * @name $mmCoursesDelegate#areNavHandlersLoadedFor
+         * @param {Number} courseId The course ID.
+         * @return {Boolean} True if addons are loaded, false otherwise.
+         */
+        self.areNavHandlersLoadedFor = function(courseId) {
+            return loaded[courseId];
+        };
+
         /**
          * Clear all courses handlers.
          *
@@ -74,6 +88,7 @@ angular.module('mm.core.courses')
          */
         self.clearCoursesHandlers = function() {
             coursesHandlers = {};
+            loaded = {};
         };
 
         /**
@@ -207,6 +222,7 @@ angular.module('mm.core.courses')
                         priority: handler.priority
                     });
                 });
+                loaded[courseId] = true;
             });
         };
 

www/core/components/courses/templates/list.html

@@ -24,11 +24,14 @@ <h2><mm-format-text watch="true">{{course.fullname}}</mm-format-text></h2>
                         </summary>
                     </p>
                 </div>
-                <div class="item tabs tabs-icon-left" ng-show="course._handlers.length">
+                <div class="item tabs tabs-icon-left" ng-show="course._handlers && course._handlers.length">
                     <a ng-repeat="handler in course._handlers | orderBy:'-priority'" ng-controller="handler.controller" ng-click="action($event, course)" class="tab-item active" title="{{title | translate}}">
                         <i class="icon {{icon}}"></i> {{title | translate}}
                     </a>
                 </div>
+                <div class="item text-center" ng-if="(!course._handlers || !course._handlers.length) && !areNavHandlersLoadedFor(course.id)">
+                    <ion-spinner></ion-spinner>
+                </div>
             </section>
         </mm-loading>
     </ion-content>

www/core/components/sidemenu/controllers/menu.js

@@ -25,6 +25,7 @@ angular.module('mm.core.sidemenu')
             $timeout, mmCoreEventLanguageChanged, mmCoreEventSiteUpdated) {
 
     $scope.handlers = $mmSideMenuDelegate.getNavHandlers();
+    $scope.areNavHandlersLoaded = $mmSideMenuDelegate.areNavHandlersLoaded;
     $scope.siteinfo = $mmSite.getInfo();
 
     $scope.logout = function() {

www/core/components/sidemenu/main.js

@@ -37,7 +37,8 @@ angular.module('mm.core.sidemenu', [])
 
 })
 
-.run(function($mmEvents, mmCoreEventLogin, mmCoreEventSiteUpdated, $mmSideMenuDelegate) {
+.run(function($mmEvents, mmCoreEventLogin, mmCoreEventSiteUpdated, mmCoreEventLogout, $mmSideMenuDelegate) {
     $mmEvents.on(mmCoreEventLogin, $mmSideMenuDelegate.updateNavHandlers);
     $mmEvents.on(mmCoreEventSiteUpdated, $mmSideMenuDelegate.updateNavHandlers);
+    $mmEvents.on(mmCoreEventLogout, $mmSideMenuDelegate.clearSiteHandlers);
 });

www/core/components/sidemenu/services/delegate.js

@@ -59,10 +59,36 @@ angular.module('mm.core.sidemenu')
     self.$get = function($mmUtil, $q, $log, $mmSite) {
         var enabledNavHandlers = {},
             currentSiteHandlers = [], // Handlers to return.
-            self = {};
+            self = {},
+            loaded = false; // If site handlers have been loaded.
 
         $log = $log.getInstance('$mmSideMenuDelegate');
 
+        /**
+         * Check if addons are loaded.
+         *
+         * @module mm.core.sidemenu
+         * @ngdoc method
+         * @name $mmSideMenuDelegate#areNavHandlersLoaded
+         * @return {Boolean} True if addons are loaded, false otherwise.
+         */
+        self.areNavHandlersLoaded = function() {
+            return loaded;
+        };
+
+        /**
+         * Clear current site nav handlers. Reserved for core use.
+         *
+         * @module mm.core.sidemenu
+         * @ngdoc method
+         * @name $mmSideMenuDelegate#clearSiteHandlers
+         * @return {Void}
+         */
+        self.clearSiteHandlers = function() {
+            loaded = false;
+            $mmUtil.emptyArray(currentSiteHandlers);
+        };
+
         /**
          * Get the handlers for the current site.
          *
@@ -148,6 +174,8 @@ angular.module('mm.core.sidemenu')
                         priority: handler.priority
                     });
                 });
+
+                loaded = true;
             });
         };
 

www/core/components/sidemenu/templates/menu.html

@@ -33,6 +33,9 @@ <h2>{{siteinfo.fullname}}</h2>
                             <i class="icon ion-ionic"></i>{{ 'mm.sidemenu.mycourses' | translate}}
                         </a>
                     </li>
+                    <li class="item text-center" ng-if="(!handlers || !handlers.length) && !areNavHandlersLoaded()">
+                        <ion-spinner></ion-spinner>
+                    </li>
                     <li ng-repeat="handler in handlers | orderBy:'-priority'" ng-controller="handler.controller" >
                         <a menu-close class="item item-icon-left" ui-sref="{{state}}" title="{{title | translate}}">
                             <i class="icon {{icon}}"></i> {{title | translate}}

www/core/components/user/controllers/profile.js

@@ -46,8 +46,11 @@ angular.module('mm.core.user')
             $scope.hasContact = user.email || user.phone1 || user.phone2 || user.city || user.country || user.address;
             $scope.hasDetails = user.url || user.roles || user.interests;
 
+            $scope.isLoadingHandlers = true;
             $mmUserDelegate.getProfileHandlersFor(user, courseid).then(function(handlers) {
                 $scope.profileHandlers = handlers;
+            }).finally(function() {
+                $scope.isLoadingHandlers = false;
             });
         }, function(message) {
             $scope.user = false;

www/core/components/user/templates/profile.html

@@ -89,6 +89,9 @@ <h2>{{ 'mm.user.description' | translate}}</h2>
                     <mm-format-text class="mm-content-with-float" watch="true">{{user.description}}</mm-format-text>
                 </div>
 
+                <div class="item text-center" ng-if="(!profileHandlers || !profileHandlers.length) && isLoadingHandlers">
+                    <ion-spinner></ion-spinner>
+                </div>
                 <div ng-repeat="handler in profileHandlers | orderBy:'-priority'" ng-controller="handler.controller">
                     <a class="button button-block" ng-click="action($event)" ng-hide="hidden" title="{{ title | translate }}">
                         {{ title | translate }} <ion-spinner class="icon" ng-if="spinner"></ion-spinner>