machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Liquid asset loading fixes

Browse Source
This commit is contained in:
softsimon 2022-01-20 22:56:49 +04:00
parent 2b1367afd8
commit 88a9e22abe
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
3 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/assets/assets.component.html
View File

@ -43,7 +43,7 @@
<thead> <thead>
<th i18n="Asset name header">Name</th> <th i18n="Asset name header">Name</th>
<th i18n="Asset ticker header">Ticker</th> <th i18n="Asset ticker header">Ticker</th>
<th i18n="Asset Issuer Domain header">Issuer domain</th> <th class="d-none d-md-block" i18n="Asset Issuer Domain header">Issuer domain</th>
<th i18n="Asset ID header">Asset ID</th> <th i18n="Asset ID header">Asset ID</th>
</thead> </thead>
<tbody> <tbody>

53
frontend/src/app/components/asset/asset.component.html
View File

@ -66,7 +66,7 @@
<div class="col icon-holder"> <div class="col icon-holder">
<img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true"> <img *ngIf="!imageError; else defaultIcon" class="assetIcon" [src]="'https://liquid.network/api/v1/asset/' + asset.asset_id + '/icon'" (error)="imageError = true">
<ng-template #defaultIcon> <ng-template #defaultIcon>
<fa-icon [icon]="['fas', 'database']" [fixedWidth]="true" size="10x"></fa-icon> <fa-icon class="defaultIcon" [icon]="['fas', 'database']" [fixedWidth]="true" size="8x"></fa-icon>
</ng-template> </ng-template>
</div> </div>
</div> </div>
@ -109,28 +109,39 @@
<ng-template [ngIf]="isLoadingAsset && !error"> <ng-template [ngIf]="isLoadingAsset && !error">
<ng-template #loadingTmpl>
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</ng-template>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container> <div class="col">
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container> <table class="table table-borderless table-striped">
<tbody>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col icon-holder">
<fa-icon class="defaultIcon skeleton" [icon]="['fas', 'database']" [fixedWidth]="true" size="8x"></fa-icon>
</div>
</div> </div>
</div> </div>

13
frontend/src/app/components/asset/asset.component.scss
View File

@ -51,10 +51,10 @@ h1 {
} }
.assetIcon { .assetIcon {
max-height: 150px; height: 150px;
margin: 25px; margin: 25px;
@media (min-width: 768px) { @media (min-width: 768px) {
max-height: 300px; height: 250px;
margin: 0; margin: 0;
} }
} }
@ -64,3 +64,12 @@ h1 {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.defaultIcon {
margin: 25px;
height: 150px;
}
.defaultIcon.skeleton {
opacity: 0.5;
}