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

Fix skeleton layout jumping in pool detail page

Browse Source
This commit is contained in:
nymkappa 2022-03-08 20:29:09 +01:00
parent 71d500d750
commit 171246f4ef
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 3 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/pool/pool.component.html
View File

@ -2,7 +2,7 @@
<div *ngIf="poolStats$ | async as poolStats; else loadingMain"> <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
<h1 class="m-0 mb-2"> <h1 class="m-0 mb-2">
<img width="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'" <img width="50" height="50" src="{{ poolStats['logo'] }}" onError="this.src = './resources/mining-pools/default.svg'"
class="mr-3"> class="mr-3">
{{ poolStats.pool.name }} {{ poolStats.pool.name }}
</h1> </h1>
@ -91,7 +91,7 @@
<ng-template #loadingMain> <ng-template #loadingMain>
<div> <div>
<h1 class="m-0 mb-2"> <h1 class="m-0 mb-2">
<img width="50" src="./resources/mining-pools/default.svg" class="mr-3"> <img width="50" height="50" src="./resources/mining-pools/default.svg" class="mr-3">
<div class="skeleton-loader"></div> <div class="skeleton-loader"></div>
</h1> </h1>

1
frontend/src/app/components/pool/pool.component.scss
View File

@ -42,7 +42,6 @@ div.scrollable {
.skeleton-loader { .skeleton-loader {
width: 100%; width: 100%;
max-width: 90px; max-width: 90px;
margin: 15px auto 3px;
} }
.table { .table {

2
frontend/src/app/components/pool/pool.component.ts
View File

@ -61,6 +61,7 @@ export class PoolComponent implements OnInit {
return this.apiService.getPoolHashrate$(this.poolId) return this.apiService.getPoolHashrate$(this.poolId)
.pipe( .pipe(
switchMap((data) => { switchMap((data) => {
this.isLoading = false;
this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate])); this.prepareChartOptions(data.hashrates.map(val => [val.timestamp * 1000, val.avgHashrate]));
return poolId; return poolId;
}), }),
@ -80,7 +81,6 @@ export class PoolComponent implements OnInit {
poolStats.pool.regexes = regexes.slice(0, -3); poolStats.pool.regexes = regexes.slice(0, -3);
poolStats.pool.addresses = poolStats.pool.addresses; poolStats.pool.addresses = poolStats.pool.addresses;
this.isLoading = false;
return Object.assign({ return Object.assign({
logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg' logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'
}, poolStats); }, poolStats);