MOBILE-1070 ux: Add retry button when infinite loading fails

src/addon/calendar/pages/list/list.html

@@ -29,7 +29,7 @@
                 </a>
             </ion-list>
 
-            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEvents($event)"></core-infinite-loading>
+            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEvents($event)" [error]="loadMoreError"></core-infinite-loading>
         </core-loading>
     </ion-content>
 </core-split-view>

src/addon/calendar/pages/list/list.ts

@@ -59,6 +59,7 @@ export class AddonCalendarListPage implements OnDestroy {
     notificationsEnabled = false;
     filteredEvents = [];
     canLoadMore = false;
+    loadMoreError = false;
     filter = {
         course: this.allCourses
     };
@@ -127,6 +128,8 @@ export class AddonCalendarListPage implements OnDestroy {
      * @return {Promise<any>} Promise resolved when done.
      */
     fetchEvents(refresh: boolean = false): Promise<any> {
+        this.loadMoreError = false;
+
         return this.calendarProvider.getEventsList(this.daysLoaded, AddonCalendarProvider.DAYS_INTERVAL).then((events) => {
             this.daysLoaded += AddonCalendarProvider.DAYS_INTERVAL;
             if (events.length === 0) {
@@ -168,7 +171,7 @@ export class AddonCalendarListPage implements OnDestroy {
             this.content.resize();
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
-            this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
+            this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
         }).then(() => {
             // Success retrieving events. Get categories if needed.
             if (this.getCategories) {

src/addon/messages/pages/discussion/discussion.html

@@ -15,7 +15,7 @@
 <ion-content class="has-footer">
     <core-loading [hideUntil]="loaded">
         <!-- Load previous messages. -->
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top"></core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
         <ion-list class="addon-messages-discussion-container" [attr.aria-live]="polite">
             <ng-container *ngFor="let message of messages; index as index; last as last">
                 <ion-chip *ngIf="showDate(message, messages[index - 1])" class="addon-messages-date" color="light">

src/addon/messages/pages/discussion/discussion.ts

@@ -62,6 +62,7 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
     loaded = false;
     showKeyboard = false;
     canLoadMore = false;
+    loadMoreError = false;
     messages = [];
     showDelete = false;
     canDelete = false;
@@ -206,6 +207,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
      * @return {Promise<any>} Resolved when done.
      */
     protected fetchData(): Promise<any> {
+        this.loadMoreError = false;
+
         this.logger.debug(`Polling new messages for discussion with user '${this.userId}'`);
         if (this.messagesBeingSent > 0) {
             // We do not poll while a message is being sent or we could confuse the user.
@@ -552,6 +555,8 @@ export class AddonMessagesDiscussionPage implements OnDestroy {
             this.pagesLoaded++;
 
             this.fetchData().catch((error) => {
+                this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
+
                 this.pagesLoaded--;
                 this.domUtils.showErrorModalDefault(error, 'addon.messages.errorwhileretrievingmessages', true);
             }).finally(() => {

src/addon/mod/forum/components/index/addon-mod-forum-index.html

@@ -88,7 +88,7 @@
                 </div>
             </core-empty-box>
 
-            <core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)"></core-infinite-loading>
+            <core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading>
         </core-loading>
 
         <ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">

src/addon/mod/forum/components/index/index.ts

@@ -41,6 +41,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
     descriptionNote: string;
     forum: any;
     canLoadMore = false;
+    loadMoreError = false;
     discussions = [];
     offlineDiscussions = [];
     selectedDiscussion = 0; // Disucssion ID or negative timecreated if it's an offline discussion.
@@ -130,6 +131,8 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
      * @return {Promise<any>} Promise resolved when done.
      */
     protected fetchContent(refresh: boolean = false, sync: boolean = false, showErrors: boolean = false): Promise<any> {
+        this.loadMoreError = false;
+
         return this.forumProvider.getForum(this.courseId, this.module.id).then((forum) => {
             this.forum = forum;
 
@@ -184,7 +187,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
 
             this.domUtils.showErrorModalDefault(message, 'addon.mod_forum.errorgetforum', true);
 
-            this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
+            this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
         });
     }
 
@@ -241,6 +244,8 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
      * @return {Promise<any>} Promise resolved when done.
      */
     protected fetchDiscussions(refresh: boolean): Promise<any> {
+        this.loadMoreError = false;
+
         if (refresh) {
             this.page = 0;
         }
@@ -314,7 +319,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         return this.fetchDiscussions(false).catch((message) => {
             this.domUtils.showErrorModalDefault(message, 'addon.mod_forum.errorgetforum', true);
 
-            this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
+            this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
         }).finally(() => {
             infiniteComplete && infiniteComplete();
         });

src/addon/mod/glossary/components/index/addon-mod-glossary-index.html

@@ -56,7 +56,7 @@
 
             <core-empty-box *ngIf="!entries.length && !offlineEntries.length" icon="list" [message]="'addon.mod_glossary.noentriesfound' | translate"></core-empty-box>
 
-            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEntries($event)"></core-infinite-loading>
+            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEntries($event)" [error]="loadMoreError"></core-infinite-loading>
         </core-loading>
 
         <ion-fab bottom end *ngIf="canAdd">

src/addon/mod/glossary/components/index/index.ts

@@ -44,6 +44,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
     offlineEntries = [];
     canAdd = false;
     canLoadMore = false;
+    loadMoreError = false;
     loadingMessage = this.translate.instant('core.loading');
     selectedEntry: number;
 
@@ -139,6 +140,8 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
      * @return {Promise<any>} Promise resolved when done.
      */
     protected fetchEntries(append: boolean = false): Promise<any> {
+        this.loadMoreError = false;
+
         if (!this.fetchFunction || !this.fetchArguments) {
             // This happens in search mode with an empty query.
             return Promise.resolve({entries: [], count: 0});
@@ -155,8 +158,6 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
             }
             this.canLoadMore = this.entries.length < result.count;
         }).catch((error) => {
-            this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
-
             return Promise.reject(error);
         });
     }
@@ -294,6 +295,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
      */
     loadMoreEntries(infiniteComplete?: any): Promise<any> {
         return this.fetchEntries(true).catch((error) => {
+            this.loadMoreError = true;
             this.domUtils.showErrorModalDefault(error, 'addon.mod_glossary.errorloadingentries', true);
         }).finally(() => {
             infiniteComplete && infiniteComplete();

src/addon/notifications/pages/list/list.html

@@ -32,6 +32,6 @@
             <addon-notifications-actions [contextUrl]="notification.contexturl" [courseId]="notification.courseid"></addon-notifications-actions>
         </ion-card>
         <core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="notifications" [message]="'addon.notifications.therearentnotificationsyet' | translate"></core-empty-box>
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreNotifications($event)"></core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreNotifications($event)" [error]="loadMoreError"></core-infinite-loading>
     </core-loading>
 </ion-content>

src/addon/notifications/pages/list/list.ts

@@ -36,6 +36,7 @@ export class AddonNotificationsListPage {
     notifications = [];
     notificationsLoaded = false;
     canLoadMore = false;
+    loadMoreError = false;
     canMarkAllNotificationsAsRead = false;
     loadingMarkAllNotificationsAsRead = false;
 
@@ -76,6 +77,8 @@ export class AddonNotificationsListPage {
      * @return {Promise<any>} Resolved when done.
      */
     protected fetchNotifications(refresh?: boolean): Promise<any> {
+        this.loadMoreError = false;
+
         if (refresh) {
             this.readCount = 0;
             this.unreadCount = 0;
@@ -107,7 +110,7 @@ export class AddonNotificationsListPage {
                 }).catch((error) => {
                     if (unread.length == 0) {
                         this.domUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true);
-                        this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
+                        this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
                     }
                 }));
             } else {
@@ -125,7 +128,7 @@ export class AddonNotificationsListPage {
             });
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'addon.notifications.errorgetnotifications', true);
-            this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
+            this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
         });
     }
 

src/components/infinite-loading/core-infinite-loading.html

@@ -1,18 +1,28 @@
-<div *ngIf="enabled && !loadingMore && position != 'top'" padding-horizontal>
+<ng-container *ngIf="!loadingMore && position != 'top'">
-    <button ion-button block (click)="loadMore()" color="light">
+    <div *ngIf="enabled || error" padding-horizontal>
-        {{'core.loadmore' | translate }}
+        <button *ngIf="!error" ion-button block (click)="loadMore()" color="light">
-    </button>
+            {{ 'core.loadmore' | translate }}
-</div>
+        </button>
+        <button *ngIf="error" ion-button block (click)="loadMore()" color="light">
+            {{ 'core.tryagain' | translate }}
+        </button>
+    </div>
+</ng-container>
 
-<ion-infinite-scroll [enabled]="enabled && !loadingMore" (ionInfinite)="loadMore($event)" [position]="position">
+<ion-infinite-scroll [enabled]="enabled && !error && !loadingMore" (ionInfinite)="loadMore($event)" [position]="position">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>
 
-<div *ngIf="enabled && !loadingMore && position == 'top'" padding-horizontal>
+<ng-container *ngIf="!loadingMore && position == 'top'">
-    <button ion-button block (click)="loadMore()" color="light">
+    <div *ngIf="enabled || error" padding-horizontal>
-        {{'core.loadmore' | translate }}
+        <button *ngIf="!error" ion-button block (click)="loadMore()" color="light">
-    </button>
+            {{ 'core.loadmore' | translate }}
-</div>
+        </button>
+        <button *ngIf="error" ion-button block (click)="loadMore()" color="light">
+            {{ 'core.tryagain' | translate }}
+        </button>
+    </div>
+</ng-container>
 
 <div *ngIf="loadingMore" padding text-center>
     <ion-spinner></ion-spinner>

src/components/infinite-loading/infinite-loading.ts

@@ -27,6 +27,7 @@ import { InfiniteScroll } from 'ionic-angular';
 })
 export class CoreInfiniteLoadingComponent {
     @Input() enabled: boolean;
+    @Input() error = false;
     @Input() position = 'bottom';
     @Output() action: EventEmitter<() => void>; // Will emit an event when triggered.
 

src/core/courses/pages/search/search.html

@@ -10,7 +10,7 @@
         <ion-item-divider color="light">{{ 'core.courses.totalcoursesearchresults' | translate:{$a: total} }}</ion-item-divider>
         <core-empty-box *ngIf="total == 0" icon="search" [message]="'core.courses.nosearchresults' | translate"></core-empty-box>
         <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
-        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)"></core-infinite-loading>
+        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreResults($event)" [error]="loadMoreError"></core-infinite-loading>
     </div>
 </ion-content>
 

src/core/courses/pages/search/search.ts

@@ -29,6 +29,7 @@ export class CoreCoursesSearchPage {
     total = 0;
     courses: any[];
     canLoadMore: boolean;
+    loadMoreError = false;
 
     protected page = 0;
     protected currentSearch = '';
@@ -68,6 +69,8 @@ export class CoreCoursesSearchPage {
      * @return {Promise<any>} Promise resolved when done.
      */
     protected searchCourses(): Promise<any> {
+        this.loadMoreError = false;
+
         return this.coursesProvider.search(this.currentSearch, this.page).then((response) => {
             if (this.page === 0) {
                 this.courses = response.courses;
@@ -79,7 +82,7 @@ export class CoreCoursesSearchPage {
             this.page++;
             this.canLoadMore = this.courses.length < this.total;
         }).catch((error) => {
-            this.canLoadMore = false;
+            this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
             this.domUtils.showErrorModalDefault(error, 'core.courses.errorsearching', true);
         });
     }

src/core/user/components/participants/core-user-participants.html

@@ -16,7 +16,7 @@
                     <p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p>
                 </a>
             </ion-list>
-            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreData($event)"></core-infinite-loading>
+            <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreData($event)" [error]="loadMoreError"></core-infinite-loading>
         </core-loading>
     </ion-content>
 </core-split-view>

src/core/user/components/participants/participants.ts

@@ -34,6 +34,7 @@ export class CoreUserParticipantsComponent implements OnInit {
     participantId: number;
     participants = [];
     canLoadMore = false;
+    loadMoreError = false;
     participantsLoaded = false;
 
     constructor(private userProvider: CoreUserProvider, private domUtils: CoreDomUtilsProvider) { }
@@ -68,6 +69,7 @@ export class CoreUserParticipantsComponent implements OnInit {
      */
     fetchData(refresh: boolean = false): Promise<any> {
         const firstToGet = refresh ? 0 : this.participants.length;
+        this.loadMoreError = false;
 
         return this.userProvider.getParticipants(this.courseId, firstToGet).then((data) => {
             if (refresh) {
@@ -78,7 +80,7 @@ export class CoreUserParticipantsComponent implements OnInit {
             this.canLoadMore = data.canLoadMore;
         }).catch((error) => {
             this.domUtils.showErrorModalDefault(error, 'Error loading participants');
-            this.canLoadMore = false; // Set to false to prevent infinite calls with infinite-loading.
+            this.loadMoreError = true; // Set to prevent infinite calls with infinite-loading.
         });
     }