Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-20 08:33:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(data): show skeleton screens before data is loaded

Browse Source 
Closes #4
This commit is contained in:
Jovan Krunić
2019-04-24 09:11:24 +02:00
committed by Sebastian Lange
parent 88f87a2ce1
commit e1039aa226
10 changed files with 102 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/modules/data/detail/data-detail.component.ts
View File

@@ -28,36 +28,37 @@ export class DataDetailComponent {
dataProvider: DataProvider;
item: SCThing;
language: SCLanguageCode;
constructor(private route: ActivatedRoute, dataProvider: DataProvider, translateService: TranslateService) {
this.dataProvider = dataProvider;
this.language = translateService.currentLang as SCLanguageCode;
// alert(translateService.currentLang);
translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.language = event.lang as SCLanguageCode;
});
}
/**
* Provides data item with given UID
*
* @param uid Unique identifier of a thing
*/
async getItem(uid: SCUuid): Promise<SCThing> {
return (await this.dataProvider.get(uid, DataScope.Remote));
async getItem(uid: SCUuid): Promise<void> {
this.dataProvider.get(uid, DataScope.Remote).then((data) => {
this.item = data;
});
}
async ngOnInit() {
this.item = await this.getItem(this.route.snapshot.paramMap.get('uid') || '');
ngOnInit() {
this.getItem(this.route.snapshot.paramMap.get('uid') || '');
}
/**
* Updates the shown thing
*
* @param refresher Refresher component the triggers the update
* @param refresher Refresher component that triggers the update
*/
async refresh(refresher: IonRefresher) {
this.item = await this.getItem(this.item.uid);
await this.getItem(this.item.uid);
refresher.complete();
}
}

12
src/app/modules/data/detail/data-detail.html
View File

@@ -7,12 +7,18 @@
<ion-title text-center>{{'data.detail.TITLE' | translate}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding *ngIf="item">
<ion-content padding>
<ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
<ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{'data.REFRESH_ACTION' | translate}}"
refreshingText="{{'data.REFRESHING' | translate}}">
</ion-refresher-content>
</ion-refresher>
<stapps-data-list-item [item]="item"></stapps-data-list-item>
<stapps-data-detail-content [item]="item"></stapps-data-detail-content>
<ng-container *ngIf="!item">
<stapps-skeleton-list-item></stapps-skeleton-list-item>
<stapps-skeleton-simple-card></stapps-skeleton-simple-card>
</ng-container>
<ng-container *ngIf="item">
<stapps-data-list-item [item]="item"></stapps-data-list-item>
<stapps-data-detail-content [item]="item"></stapps-data-detail-content>
</ng-container>
</ion-content>