From ee265be55e19aae9e722e61458c5811ec5f3387a Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Tue, 14 Feb 2023 12:51:41 -0600
Subject: [PATCH] Show skeleton loader for all blocks while offline

---
 .../blockchain-blocks/blockchain-blocks.component.html    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index deb915f26..52805b750 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -2,7 +2,7 @@
   [style.left]="static ? (offset || 0) + 'px' : null"
   *ngIf="static || (loadingBlocks$ | async) === false; else loadingBlocksTemplate">
   <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
-    <ng-container *ngIf="block && !block.loading && !block.placeholder; else placeholderBlock">
+    <ng-container *ngIf="connected && block && !block.loading && !block.placeholder; else placeholderBlock">
       <div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
         class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
         id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
@@ -59,7 +59,7 @@
       </div>
     </ng-container>
     <ng-template #placeholderBlock>
-      <ng-container *ngIf="block && block.placeholder && !loadingTip; else loadingBlock">
+      <ng-container *ngIf="block && block.placeholder && connected && !loadingTip; else loadingBlock">
         <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i"
           class="text-center bitcoin-block mined-block placeholder-block blockchain-blocks-{{ i }}"
           id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]">
@@ -68,10 +68,10 @@
       </ng-container>
     </ng-template>
     <ng-template #loadingBlock>
-      <ng-container *ngIf="loadingTip || (block && block.loading)">
+      <ng-container *ngIf="!connected || loadingTip || (block && block.loading)">
         <div class="flashing loading">
           <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}"
-            [ngStyle]="blockStyles[i]"></div>
+            [ngStyle]="emptyBlockStyles[i]"></div>
         </div>
       </ng-container>
     </ng-template>