multi-pool active accelerating details component

frontend/src/app/services/mining.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 import { PoolsStats, SinglePoolStats } from '../interfaces/node-api.interface';
 import { ApiService } from '../services/api.service';
 import { StateService } from './state.service';
@@ -25,6 +25,12 @@ export interface MiningStats {
   providedIn: 'root'
 })
 export class MiningService {
+  cache: {
+    [interval: string]: {
+      lastUpdated: number;
+      data: MiningStats;
+    }
+  } = {};
 
   constructor(
     private stateService: StateService,
@@ -36,9 +42,20 @@ export class MiningService {
    * Generate pool ranking stats
    */
   public getMiningStats(interval: string): Observable<MiningStats> {
-    return this.apiService.listPools$(interval).pipe(
-      map(response => this.generateMiningStats(response))
-    );
+    // returned cached data fetched within the last 5 minutes
+    if (this.cache[interval] && this.cache[interval].lastUpdated > (Date.now() - (5 * 60000))) {
+      return of(this.cache[interval].data);
+    } else {
+      return this.apiService.listPools$(interval).pipe(
+        map(response => this.generateMiningStats(response)),
+        tap(stats => {
+          this.cache[interval] = {
+            lastUpdated: Date.now(),
+            data: stats,
+          };
+        })
+      );
+    }
   }
 
   /**