diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts
index 55b73b8dc..1f0b8d796 100644
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -49,6 +49,9 @@ describe('Mainnet', () => {
                 cy.viewport('macbook-16');
                 cy.wait(1000);
                 cy.get('.blockchain-wrapper').should('be.visible');
+                cy.get('#mempool-block-0').should('be.visible');
+                cy.get('#mempool-block-1').should('be.visible');
+                cy.get('#mempool-block-2').should('be.visible');
             });
         });
 
diff --git a/frontend/src/app/components/television/television.component.html b/frontend/src/app/components/television/television.component.html
index a541630a4..404e10ece 100644
--- a/frontend/src/app/components/television/television.component.html
+++ b/frontend/src/app/components/television/television.component.html
@@ -1,10 +1,10 @@
 <div id="tv-wrapper">
 
-  <div *ngIf="loading" class="loading">
+  <div *ngIf="mempoolStats.length === 0" class="loading">
     <div class="spinner-border text-light"></div>
   </div>
 
-  <div class="tv-container" *ngIf="!loading">
+  <div class="tv-container">
 
     <div class="chart-holder" *ngIf="mempoolStats.length">
       <app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
@@ -12,8 +12,8 @@
 
     <div class="blockchain-wrapper">
       <div class="position-container">
-        <app-mempool-blocks></app-mempool-blocks>
-        <app-blockchain-blocks></app-blockchain-blocks>
+        <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
+        <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
         <div id="divider"></div>
       </div>
     </div>
diff --git a/frontend/src/app/components/television/television.component.ts b/frontend/src/app/components/television/television.component.ts
index e4d12051e..7ed56d663 100644
--- a/frontend/src/app/components/television/television.component.ts
+++ b/frontend/src/app/components/television/television.component.ts
@@ -4,6 +4,7 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-television',
@@ -11,7 +12,7 @@ import { SeoService } from 'src/app/services/seo.service';
   styleUrls: ['./television.component.scss']
 })
 export class TelevisionComponent implements OnInit {
-  loading = true;
+  isLoading$: Observable<boolean>;
 
   mempoolStats: OptimizedMempoolStats[] = [];
   mempoolVsizeFeesData: any;
@@ -26,11 +27,11 @@ export class TelevisionComponent implements OnInit {
   ngOnInit() {
     this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
     this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
+    this.isLoading$ = this.stateService.isLoadingWebSocket$;
 
     this.apiService.list2HStatistics$()
       .subscribe((mempoolStats) => {
         this.mempoolStats = mempoolStats;
-        this.loading = false;
       });
 
     this.stateService.live2Chart$