mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 02:11:49 +01:00
Code Issues Projects Releases Wiki Activity

[accelerator] improve dashboard responsiveness a bit

Browse Source
This commit is contained in:
nymkappa 2024-02-26 16:23:00 +01:00
parent fbebfdae04
commit b3b65c59dc
No known key found for this signature in database
GPG Key ID: 92358FC85D9645DE
3 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
View File

@ -17,7 +17,7 @@
<th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
<th class="block text-right" i18n="accelerator.block">Block</th>
<th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
<th class="time text-right" i18n="" *ngIf="!this.widget">Date</th>
<th class="date text-right" i18n="" *ngIf="!this.widget">Date</th>
</ng-container>
</thead>
<tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
@ -53,7 +53,7 @@
<span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
<span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
</td>
<td class="time text-right" *ngIf="!this.widget">
<td class="date text-right" *ngIf="!this.widget">
<app-time kind="since" [time]="acceleration.added" [fastRender]="true"></app-time>
</td>
</ng-container>

60
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
View File

@ -63,16 +63,28 @@ tr, td, th {
}
.txid {
@media (max-width: 500px) {
width: 20%;
}
.fee {
width: 15%;
}
.block {
width: 15%;
@media (max-width: 700px) {
display: none;
}
}
.fee, .block, .status {
width: 15%;
.status {
width: 13%;
}
@media (max-width: 720px) {
width: 20%;
.date {
width: 20%;
@media (max-width: 600px) {
display: none;
}
}
@ -83,23 +95,12 @@ tr, td, th {
text-overflow: ellipsis;
white-space: nowrap;
max-width: 30%;
@media (max-width: 1060px) and (min-width: 768px) {
display: none;
}
@media (max-width: 500px) {
display: none;
}
}
.fee-rate {
width: 20%;
@media (max-width: 1060px) and (min-width: 768px) {
text-align: start !important;
}
@media (max-width: 500px) {
text-align: start !important;
}
@media (max-width: 840px) and (min-width: 768px) {
text-align: end !important;
@media (max-width: 975px) and (min-width: 768px) {
display: none;
}
@media (max-width: 410px) {
@ -108,32 +109,31 @@ tr, td, th {
}
.bid {
text-align: end !important;
width: 30%;
min-width: 150px;
@media (max-width: 840px) and (min-width: 768px) {
text-align: start !important;
}
@media (max-width: 410px) {
text-align: start !important;
}
}
.time {
width: 25%;
@media (max-width: 600px) {
display: none;
}
@media (max-width: 1200px) and (min-width: 768px) {
display: none;
}
}
.fee {
width: 30%;
@media (max-width: 1060px) and (min-width: 768px) {
text-align: start !important;
}
@media (max-width: 500px) {
text-align: start !important;
}
text-align: end !important;
}
.block {
width: 20%;
@media (max-width: 1200px) and (min-width: 768px) {
display: none;
}
}
.status {

8
frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
View File

@ -47,9 +47,11 @@ export class AccelerationsListComponent implements OnInit {
const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ timeframe: '1m', page: page }));
return accelerationObservable$.pipe(
switchMap(response => {
const accelerations = response.body;
this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10);
console.log(this.accelerationCount);
let accelerations = response;
if (response.body) {
accelerations = response.body;
this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10);
}
if (this.pending) {
for (const acceleration of accelerations) {
acceleration.status = acceleration.status || 'accelerating';