Merge pull request #1170 from mempool/simon/liquid-loading-fixes
Liquid asset loading fixes
This commit is contained in:
commit
b2fac709f9
@ -43,7 +43,7 @@
|
||||
<thead>
|
||||
<th i18n="Asset name header">Name</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>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
@ -66,7 +66,7 @@
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,28 +109,39 @@
|
||||
|
||||
<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="row">
|
||||
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
@ -51,10 +51,10 @@ h1 {
|
||||
}
|
||||
|
||||
.assetIcon {
|
||||
max-height: 150px;
|
||||
height: 150px;
|
||||
margin: 25px;
|
||||
@media (min-width: 768px) {
|
||||
max-height: 300px;
|
||||
height: 250px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -63,4 +63,13 @@ h1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.defaultIcon {
|
||||
margin: 25px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.defaultIcon.skeleton {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user