cancel subscriptions

src/app/pages/pages.component.html

@@ -30,8 +30,7 @@
 
   </form>
 
-  <mat-progress-bar *ngIf="(ipfs || ipns) && dataSource && gateways" mode="determinate"
+  <mat-progress-bar *ngIf="subscriptions.length" mode="determinate" [value]="dataSource.data.length / gateways.length * 100">
-    [value]="dataSource.data.length / gateways.length * 100">
   </mat-progress-bar>
 
   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
@@ -53,10 +52,10 @@
       <td mat-cell *matCellDef="let element">
         <div [ngSwitch]="element.error">
           <div *ngSwitchCase="null">
-            <strong><a [href]="element.gateway" class="aqua"> {{ element.gateway }} </a></strong>
+            <strong><a href="{{ element.gateway }}#x-ipfs-companion-no-redirect" class="aqua"> {{ element.gateway }} </a></strong>
           </div>
           <div *ngSwitchDefault>
-            <a [href]="element.gateway" class="aqua-muted"> {{ element.gateway }} </a>
+            <a href="{{ element.gateway }}#x-ipfs-companion-no-redirect" class="aqua-muted"> {{ element.gateway }} </a>
           </div>
         </div>
       </td>

src/app/pages/pages.component.ts

@@ -1,6 +1,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { Subscription } from 'rxjs';
 import { GatewayService } from '../services/gateway.service';
 
 @Component({
@@ -18,6 +19,7 @@ export class PagesComponent implements OnInit {
     'error',
     'gateway',
   ];
+  subscriptions: Subscription[] = [];
 
   @ViewChild(MatTable, { static: false }) matTable: MatTable<Result>;
 
@@ -39,17 +41,27 @@ export class PagesComponent implements OnInit {
   }
 
   cache(type: string, hash: string): void {
+
+    while (this.subscriptions.length) {
+      const sub = this.subscriptions.pop();
+      if (!sub.closed) {
+        sub.unsubscribe();
+      }
+    }
+
     this.dataSource.data = [];
     this.matTable.renderRows();
 
     this.gateways.forEach(gateway => {
+      this.subscriptions.push(
         this.gatewayService.get(gateway, type, hash).subscribe(_ => {
           this.dataSource.data.push({ gateway: `${gateway.replace(':type', type).replace(':hash', hash)}`, error: null });
           this.matTable.renderRows();
         }, (error: HttpErrorResponse) => {
           this.dataSource.data.push({ gateway: `${gateway.replace(':type', type).replace(':hash', hash)}`, error });
           this.matTable.renderRows();
-      });
+        })
+      );
     });
 
   }