better loading display in timelines and thread

src/app/components/stream/stream-statuses/stream-statuses.component.html

@@ -1,6 +1,4 @@
 <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
-    <app-waiting-animation *ngIf="statuses.length === 0" class="waiting-icon"></app-waiting-animation>
-
     <div *ngIf="displayError" class="stream-toots__error">{{displayError}}</div>
 
     <!-- data-simplebar  -->
@@ -10,4 +8,6 @@
             (browseHashtagEvent)="browseHashtag($event)"
             (browseThreadEvent)="browseThread($event)"></app-status>
     </div>
+
+    <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
 </div>

src/app/components/stream/stream-statuses/stream-statuses.component.ts

@@ -18,8 +18,7 @@ import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
     styleUrls: ['./stream-statuses.component.scss']
 })
 export class StreamStatusesComponent implements OnInit, OnDestroy {
-
+    isLoading = true; 
-    isLoading = false; //TODO
     displayError: string;
 
     private _streamElement: StreamElement;
@@ -113,7 +112,6 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
         });
     }
 
-
     @ViewChild('statusstream') public statustream: ElementRef;
     private applyGoToTop(): boolean {
         this.loadBuffer();
@@ -181,6 +179,9 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     }
 
     private scrolledToBottom() {
+        if(this.isLoading) return;
+
+        this.isLoading = true;
         this.isProcessingInfiniteScroll = true;
 
         const lastStatus = this.statuses[this.statuses.length - 1];
@@ -195,6 +196,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
                 this.notificationService.notifyHttpError(err);
             })
             .then(() => {
+                this.isLoading = false;
                 this.isProcessingInfiniteScroll = false;
             });
     }
@@ -208,6 +210,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
     private retrieveToots(): void {
         this.mastodonService.getTimeline(this.account, this._streamElement.type, null, null, this.streamingService.nbStatusPerIteration, this._streamElement.tag, this._streamElement.list)
             .then((results: Status[]) => {
+                this.isLoading = false;
                 for (const s of results) {
                     const wrapper = new StatusWrapper(s, this.account);
                     this.statuses.push(wrapper);
@@ -227,6 +230,6 @@ export class StreamStatusesComponent implements OnInit, OnDestroy {
             this.bufferWasCleared = true;
             this.bufferStream.length = 2 * this.streamingService.nbStatusPerIteration;
         }
-    }
+    }  
 }
 

src/app/components/stream/stream.component.html

@@ -19,12 +19,10 @@
     <app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement">
     </app-stream-edition>
 
-    <app-stream-statuses class="stream-statuses" [streamElement]="streamElement"
+    <app-stream-statuses class="stream-statuses"
-        [goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)"
+        [streamElement]="streamElement"
-        (browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-stream-statuses>
+        [goToTop]="goToTopSubject.asObservable()" 
-    <!-- <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
+        (browseAccountEvent)="browseAccount($event)"
-        <div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
+        (browseHashtagEvent)="browseHashtag($event)" 
-            <app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>
+        (browseThreadEvent)="browseThread($event)"></app-stream-statuses>
-        </div>
-    </div>  -->
 </div>

src/app/components/stream/thread/thread.component.ts

@@ -7,6 +7,7 @@ import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
 import { Results, Context, Status } from '../../../services/models/mastodon.interfaces';
 import { NotificationService } from '../../../services/notification.service';
 import { AccountInfo } from '../../../states/accounts.state';
+import { StreamStatusesComponent } from '../stream-statuses/stream-statuses.component';
 
 @Component({
     selector: 'app-thread',
@@ -15,8 +16,8 @@ import { AccountInfo } from '../../../states/accounts.state';
 })
 export class ThreadComponent implements OnInit {   
     statuses: StatusWrapper[] = [];
-    isLoading: boolean;
     displayError: string;
+    isLoading = true; 
 
     private lastThreadEvent: OpenThreadEvent;
 
@@ -27,9 +28,8 @@ export class ThreadComponent implements OnInit {
     @Input('currentThread')
     set currentThread(thread: OpenThreadEvent) {
         if (thread) {
-            this.isLoading = true;
             this.lastThreadEvent = thread;
-            this.getThread(thread);
+            // this.getThread(thread);
         }
     }
 
@@ -39,10 +39,12 @@ export class ThreadComponent implements OnInit {
         private readonly mastodonService: MastodonService) { }
 
     ngOnInit() {
+        this.getThread(this.lastThreadEvent);
     }
 
     private getThread(openThreadEvent: OpenThreadEvent) {
         this.statuses.length = 0;
+        this.displayError = null;
 
         let currentAccount = this.toolsService.getSelectedAccounts()[0];
 
@@ -66,10 +68,8 @@ export class ThreadComponent implements OnInit {
             this.retrieveThread(currentAccount, statusPromise);
 
         } else if (sourceAccount.id === currentAccount.id) {
-
             var statusPromise = Promise.resolve(status);
             this.retrieveThread(currentAccount, statusPromise);
-
         } else {
             this.isLoading = false;
             this.displayError = `You need to use your account ${sourceAccount.username}@${sourceAccount.instance} to show this thread`;
@@ -79,25 +79,28 @@ export class ThreadComponent implements OnInit {
     private retrieveThread(currentAccount: AccountInfo, pipeline: Promise<Status>) {
         pipeline
             .then((status: Status) => {
-                this.mastodonService.getStatusContext(currentAccount, status.id)
+                return this.mastodonService.getStatusContext(currentAccount, status.id)
                     .then((context: Context) => {
-                        this.isLoading = false;
                         let contextStatuses = [...context.ancestors, status, ...context.descendants]
 
                         for (const s of contextStatuses) {
                             const wrapper = new StatusWrapper(s, currentAccount);
                             this.statuses.push(wrapper);
                         }
-                    })
-                    .catch((err: HttpErrorResponse) => {
-                        this.isLoading = false;
-                        this.notificationService.notifyHttpError(err);
                     });
+                 
+            })
+            .catch((err: HttpErrorResponse) => {
+                this.notificationService.notifyHttpError(err);
+            })
+            .then(() => {
+                this.isLoading = false;
             });
     }
 
     refresh(): any {
         this.isLoading = true;
+        this.displayError = null;
         this.statuses.length = 0;
         this.getThread(this.lastThreadEvent);
     }