Improve skeleton on pool detail page

frontend/src/app/components/pool/pool.component.html

@@ -1,9 +1,9 @@
 <div class="container-xl">
 
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
-    <div style="display:flex">
+    <div style="display:flex" class="mb-3">
       <img width="50" height="50" src="{{ poolStats['logo'] }}"
-        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3 mb-3">
+        onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
       <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
     </div>
 
@@ -111,7 +111,7 @@
     </tbody>
     <ng-template #skeleton>
       <tbody>
-        <tr *ngFor="let item of skeletonLines">
+        <tr *ngFor="let item of [1,2,3,4,5]">
           <td class="height">
             <span class="skeleton-loader"></span>
           </td>
@@ -145,15 +145,15 @@
 
 <ng-template #loadingMain>
   <div>
-    <div style="display:flex">
+    <div class="mb-3" style="display:flex; position: relative">
-      <img width="50" height="50" src="./resources/mining-pools/default.svg" class="mr-3 mb-3">
+      <div class="skeleton-loader mr-3" style="width: 50px; height: 50px"></div>
-      <h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader"></div></h1>
+      <h1 class="m-0 pt-1 pt-md-0"><div class="skeleton-loader" style="position: absolute; top: 32%; width: 150px; height: 20px"></div></h1>
     </div>
 
     <div class="box">
       <div class="row">
         <div class="col-lg-9">
-          <table class="table table-borderless table-striped" style="table-layout: fixed;">
+          <table class="table table-borderless table-striped">
             <tbody>
               <tr>
                 <td class="label">Tags</td>
@@ -176,7 +176,7 @@
           </table>
         </div>
         <div class="col-lg-3">
-          <table class="table table-borderless table-striped">
+          <table class="table table-borderless table-striped" >
             <tbody>
               <tr>
                 <td class="label">Mined Blocks</td>

frontend/src/app/components/pool/pool.component.scss

@@ -45,7 +45,7 @@ div.scrollable {
 }
 
 .label {
-  width: 30%;
+  width: 35%;
 }
 
 .data {
@@ -136,4 +136,18 @@ div.scrollable {
   @media (max-width: 450px) {
     text-align: right;
   }
-}
+}
+
+.skeleton-loader {
+  max-width: 200px;
+}
+
+.loadingGraphs {
+  position: absolute;
+  left: calc(50% - 15px);
+  z-index: 100;
+  top: 475px;
+  @media (max-width: 992px) {
+    top: 600px;
+  }
+}

frontend/src/app/components/pool/pool.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { EChartsOption, graphic } from 'echarts';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, timer } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
 import { ApiService } from 'src/app/services/api.service';
@@ -13,14 +13,6 @@ import { formatNumber } from '@angular/common';
   selector: 'app-pool',
   templateUrl: './pool.component.html',
   styleUrls: ['./pool.component.scss'],
-  styles: [`
-    .loadingGraphs {
-      position: absolute;
-      top: 50%;
-      left: calc(50% - 15px);
-      z-index: 100;
-    }
-  `],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PoolComponent implements OnInit {
@@ -31,7 +23,6 @@ export class PoolComponent implements OnInit {
   poolStats$: Observable<PoolStat>;
   blocks$: Observable<BlockExtended[]>;
   isLoading = true;
-  skeletonLines: number[] = [...Array(5).keys()];
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -40,11 +31,11 @@ export class PoolComponent implements OnInit {
     height: 'auto',
   };
 
-  loadMoreSubject: BehaviorSubject<undefined> = new BehaviorSubject(undefined);
-
   blocks: BlockExtended[] = [];
   poolId: number = undefined;
 
+  loadMoreSubject: BehaviorSubject<number> = new BehaviorSubject(this.poolId);
+
   constructor(
     @Inject(LOCALE_ID) public locale: string,
     private apiService: ApiService,
@@ -59,6 +50,7 @@ export class PoolComponent implements OnInit {
         switchMap((poolId: any) => {
           this.isLoading = true;
           this.poolId = poolId;
+          this.loadMoreSubject.next(this.poolId);
           return this.apiService.getPoolHashrate$(this.poolId)
             .pipe(
               switchMap((data) => {
@@ -88,6 +80,9 @@ export class PoolComponent implements OnInit {
     this.blocks$ = this.loadMoreSubject
       .pipe(
         switchMap((flag) => {
+          if (this.poolId === undefined) {
+            return [];
+          }
           return this.apiService.getPoolBlocks$(this.poolId, this.blocks[this.blocks.length - 1]?.height);
         }),
         tap((newBlocks) => {
@@ -187,7 +182,7 @@ export class PoolComponent implements OnInit {
   }
 
   loadMore() {
-    this.loadMoreSubject.next(undefined);
+    this.loadMoreSubject.next(this.poolId);
   }
 
   trackByBlock(index: number, block: BlockExtended) {