Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

better loading display in timelines and thread

This commit is contained in:
Nicolas Constant 2019-02-24 15:35:48 -05:00
parent f20fb35e00
commit 0141b8f6d1
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/stream/stream-statuses/stream-statuses.component.html
View File

@ -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>

11
src/app/components/stream/stream-statuses/stream-statuses.component.ts
View File

@ -18,8 +18,7 @@ import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
styleUrls: ['./stream-statuses.component.scss']
})
export class StreamStatusesComponent implements OnInit, OnDestroy {
isLoading = false; //TODO
isLoading = true;
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;
}
}
}
}

14
src/app/components/stream/stream.component.html
View File

@ -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"
[goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)"></app-stream-statuses>
<!-- <div class="stream-toots flexcroll" #statusstream (scroll)="onScroll()">
<div class="stream-toots__status" *ngFor="let statusWrapper of statuses">
<app-status [statusWrapper]="statusWrapper" (browseAccount)="browseAccount($event)" (browseHashtag)="browseHashtag($event)"></app-status>
</div>
</div> -->
<app-stream-statuses class="stream-statuses"
[streamElement]="streamElement"
[goToTop]="goToTopSubject.asObservable()"
(browseAccountEvent)="browseAccount($event)"
(browseHashtagEvent)="browseHashtag($event)"
(browseThreadEvent)="browseThread($event)"></app-stream-statuses>
</div>

25
src/app/components/stream/thread/thread.component.ts
View File

@ -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);
}