feat(#2): improve deferred loading ux

src/app/components/advertise/pick-ads-appointments/pick-ads-appointments.ts

@@ -8,16 +8,12 @@ import * as moment from 'moment';
 // Abstract
 import {AbstractPickAppointments} from '../../core/pick-appointments/abstract-pick-appointments';
 
-// Model
-import {Item} from '../../../services/model/item/item';
-import {Appointment} from '../../../services/model/appointment/appointment';
-
 // Resources and utils
 import {Comparator} from '../../../services/core/utils/utils';
-import {PickAppointmentExistingDates, PickAppointmentTime} from '../../../services/model/utils/pickAppointments';
+import {PickAppointmentTime} from '../../../services/model/utils/pickAppointments';
 
 // Services
-import {AppointmentService} from '../../../services/core/appointment/appointment-service';
+import {AdminScheduledDates} from '../../../services/core/appointment/admin-appoinments-service';
 
 @Component({
     templateUrl: 'pick-ads-appointments.html',
@@ -31,33 +27,27 @@ export class PickAdsAppointmentsComponent extends AbstractPickAppointments imple
 
     @Output() notifiySelected: EventEmitter<number[]> = new EventEmitter<number[]>();
 
-    @Input() item: Item;
-    @Input() appointment: Appointment;
+    @Input() adminScheduledDates: AdminScheduledDates;
 
     unavailableAppointmentDates: number[];
-
-    // Output
     selectedAppointmentsStartTime: number[];
 
-    constructor(private appointmentService: AppointmentService) {
+    constructor() {
         super();
         this.onlySelectedDates = false;
     }
 
     ngOnChanges(changes: { [propName: string]: SimpleChange }) {
-        if (Comparator.isEmpty(this.selectedDates)) {
-
+        if (Comparator.isEmpty(this.selectedDates) && !Comparator.isEmpty(this.adminScheduledDates)) {
             this.onlySelectedDates = false;
 
-            this.appointmentService.buildExistingDates(this.item, this.appointment).then((result: PickAppointmentExistingDates) => {
-                this.selectedAppointmentsStartTime = result.scheduledDates != null ? result.scheduledDates : new Array();
-                this.selectedDates = result.scheduledDates != null ? result.scheduledDates : new Array();
-                this.unavailableAppointmentDates = result.unavailableAppointmentDates;
+            this.selectedAppointmentsStartTime = this.adminScheduledDates.selectedAppointmentsStartTime;
+            this.selectedDates = this.adminScheduledDates.selectedDates;
+            this.unavailableAppointmentDates = this.adminScheduledDates.unavailableAppointmentDates;
 
-                this.emitSelectedDates();
+            this.emitSelectedDates();
 
-                this.init();
-            });
+            this.init();
         }
     }
 

src/app/pages/advertise/admin-appointments/admin-appointments.page.html

@@ -20,7 +20,7 @@
 
 <ion-content role="ad" [forceOverscroll]="true">
 
-  <div ion-fixed>
+  <div ion-fixed *ngIf="loaded">
 
     <ion-slides #adsAdminAppointmentsSlider pager="false" [options]="slideOptsOnlyExternal">
       <ion-slide *ngIf="itemEndCouldBeExtended && item != null">
@@ -72,7 +72,7 @@ <h1 padding-start padding-end text-center class="padding-top-very-small">{{'ADMI
 
           <h2 padding-start padding-end text-center>{{'ADMIN_APPOINTMENTS.APPOINTMENTS.SUB_TITLE' | translate}}</h2>
 
-          <app-pick-ads-appointments [item]="item" [appointment]="appointment" (notifiySelected)="select($event)"></app-pick-ads-appointments>
+          <app-pick-ads-appointments [adminScheduledDates]="adminScheduledDates"  (notifiySelected)="select($event)"></app-pick-ads-appointments>
 
           <div text-center padding class="date-picker-actions">
             <ion-button expand="full" shape="round" (click)="extendItemAndUpdateAppointment()">
@@ -87,4 +87,8 @@ <h2 padding-start padding-end text-center>{{'ADMIN_APPOINTMENTS.APPOINTMENTS.SUB
 
   </div>
 
+  <div class="spinner-loading" padding text-center *ngIf="!loaded">
+    <ion-spinner color="primary"></ion-spinner>
+  </div>
+
 </ion-content>

src/app/pages/advertise/admin-appointments/admin-appointments.page.scss

@@ -1,3 +1,5 @@
+@import "../../../../theme/spinner";
+
 [ion-fixed] {
   height: 100%;
 }

src/app/pages/advertise/admin-appointments/admin-appointments.page.ts

@@ -1,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {LoadingController, NavController, Platform, Slides, ToastController} from '@ionic/angular';
 import {HttpErrorResponse} from '@angular/common/http';
 
@@ -24,13 +24,14 @@ import {AppointmentService} from '../../../services/core/appointment/appointment
 import {AdsService} from '../../../services/advertise/ads-service';
 import {GoogleAnalyticsNativeService} from '../../../services/native/analytics/google-analytics-native-service';
 import {AdminAppointmentsNavParams, NavParamsService} from '../../../services/core/navigation/nav-params-service';
+import {AdminAppointmentsService, AdminScheduledDates} from '../../../services/core/appointment/admin-appoinments-service';
 
 @Component({
     selector: 'app-admin-appointments',
     templateUrl: './admin-appointments.page.html',
     styleUrls: ['./admin-appointments.page.scss'],
 })
-export class AdminAppointmentsPage extends AbstractPage {
+export class AdminAppointmentsPage extends AbstractPage implements OnInit {
 
     @ViewChild('adsAdminAppointmentsSlider') slider: Slides;
 
@@ -53,6 +54,10 @@ export class AdminAppointmentsPage extends AbstractPage {
     extendDateDisplay: string;
     itemEndThePast: boolean = false;
 
+    adminScheduledDates: AdminScheduledDates;
+
+    loaded: boolean = false;
+
     constructor(private platform: Platform,
                 private navController: NavController,
                 private loadingController: LoadingController,
@@ -61,25 +66,34 @@ export class AdminAppointmentsPage extends AbstractPage {
                 private appointmentService: AppointmentService,
                 private adsService: AdsService,
                 private googleAnalyticsNativeService: GoogleAnalyticsNativeService,
-                private navParamsService: NavParamsService) {
+                private navParamsService: NavParamsService,
+                private adminAppointmentsService: AdminAppointmentsService) {
         super();
 
         this.gaTrackView(this.platform, this.googleAnalyticsNativeService, this.RESOURCES.GOOGLE.ANALYTICS.TRACKER.VIEW.ADS.ADS_CLOSE);
     }
 
-    async ionViewWillEnter() {
-        this.initItem().then((item: Item) => {
-            this.item = item;
+    async ngOnInit() {
+        this.item = await this.initItem();
 
-            if (this.item != null) {
-                this.appointment = this.item.appointment;
+        if (this.item != null) {
+            this.appointment = this.item.appointment;
 
-                this.computeExtendDates().then(() => {
-                    // Do nothing
-                });
-            }
-        });
+            const promises = new Array();
+            promises.push(this.computeExtendDates());
+            promises.push(this.adminAppointmentsService.init(this.item, this.appointment));
 
+            forkJoin(promises).subscribe(([empty, adminScheduledDates]: [void, AdminScheduledDates]) => {
+                this.adminScheduledDates = adminScheduledDates;
+
+                this.loaded = true;
+            });
+        } else {
+            this.loaded = true;
+        }
+    }
+
+    async ionViewWillEnter() {
         this.overrideHardwareBackAction();
 
         await this.displayMenuToggle();
@@ -145,8 +159,8 @@ export class AdminAppointmentsPage extends AbstractPage {
         }
     }
 
-    private initItem(): Promise<{}> {
-        return new Promise((resolve) => {
+    private initItem(): Promise<Item> {
+        return new Promise<Item>((resolve) => {
             // Always refresh the item to be sure to have the last one
             this.adsService.findAdsItems().then((items: Item[]) => {
                 resolve(Comparator.isEmpty(items) ? null : items[0]);
@@ -156,8 +170,8 @@ export class AdminAppointmentsPage extends AbstractPage {
         });
     }
 
-    private computeExtendDates(): Promise<{}> {
-        return new Promise((resolve) => {
+    private computeExtendDates(): Promise<void> {
+        return new Promise<void>((resolve) => {
             this.itemEndCouldBeExtended = ItemsComparator.isItemExpiringSoon(this.item);
 
             let today: Date = new Date();

src/app/services/core/appointment/admin-appoinments-service.ts

@@ -0,0 +1,38 @@
+import {Injectable} from '@angular/core';
+
+// Model
+import {Appointment} from '../../model/appointment/appointment';
+import {PickAppointmentExistingDates} from '../../model/utils/pickAppointments';
+import {Item} from '../../model/item/item';
+
+// Services
+import {AppointmentService} from './appointment-service';
+
+
+export interface AdminScheduledDates {
+    selectedAppointmentsStartTime: number[];
+    selectedDates: number[];
+    unavailableAppointmentDates: number[];
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AdminAppointmentsService {
+
+    constructor(private appointmentService: AppointmentService) {
+
+    }
+
+    init(item: Item, appointment: Appointment): Promise<AdminScheduledDates> {
+        return new Promise<AdminScheduledDates>((resolve) => {
+            this.appointmentService.buildExistingDates(item, appointment).then((result: PickAppointmentExistingDates) => {
+                resolve({
+                    selectedAppointmentsStartTime: result.scheduledDates != null ? result.scheduledDates : new Array(),
+                    selectedDates: result.scheduledDates != null ? result.scheduledDates : new Array(),
+                    unavailableAppointmentDates: result.unavailableAppointmentDates
+                });
+            });
+        });
+    }
+}