Merge pull request #1324 from nymkappa/bugfix/difficulty-adj-table-skeleton

Fix skeleton for difficulty adjustment table

frontend/src/app/components/hashrate-chart/hashrate-chart.component.html

@@ -27,7 +27,7 @@
 
   <div *ngIf="!tableOnly" [class]="!widget ? 'chart' : 'chart-widget'"
     echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
-  <div class="text-center loadingGraphs" *ngIf="isLoading">
+  <div class="text-center loadingGraphs" *ngIf="isLoading && !tableOnly">
     <div class="spinner-border text-light"></div>
   </div>
   
@@ -48,6 +48,14 @@
         <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">{{ formatNumber(diffChange.change, locale, '1.2-2') }}%</td>
       </tr>
     </tbody>
+    <tbody *ngIf="isLoading">
+      <tr *ngFor="let item of [1,2,3,4,5]">
+        <td class="d-none d-md-block w-75"><span class="skeleton-loader"></span></td>
+        <td class="text-left"><span class="skeleton-loader w-75"></span></td>
+        <td class="text-right"><span class="skeleton-loader w-75"></span></td>
+        <td class="text-right"><span class="skeleton-loader w-75"></span></td>
+      </tr>
+  </tbody>
   </table>
 
 </div>

frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts

@@ -125,7 +125,21 @@ export class HashrateChartComponent implements OnInit {
   }
 
   prepareChartOptions(data) {
+    let title = undefined;
+    if (data.hashrates.length === 0) {
+      title = {
+        textStyle: {
+            color: "grey",
+            fontSize: 15
+        },
+        text: "Indexing in progress...",
+        left: "center",
+        top: "center"
+      };
+    }
+
     this.chartOptions = {
+      title: title,
       color: [
         new graphic.LinearGradient(0, 0, 0, 0.65, [
           { offset: 0, color: '#F4511E' },

frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts

@@ -124,7 +124,21 @@ export class HashrateChartPoolsComponent implements OnInit {
   }
 
   prepareChartOptions(data) {
+    let title = undefined;
+    if (data.series.length === 0) {
+      title = {
+        textStyle: {
+            color: "grey",
+            fontSize: 15
+        },
+        text: "Indexing in progress...",
+        left: "center",
+        top: this.widget ? 115 : this.isMobile() ? 'center' : 225,
+      };
+    }
+
     this.chartOptions = {
+      title: title,
       grid: {
         right: this.right,
         left: this.left,