Handle network interruptions in scrollable blockchain

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -1,6 +1,6 @@
 <div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr"
   [style.left]="static ? (offset || 0) + 'px' : null"
-  *ngIf="(loadingBlocks$ | async) === false; else loadingBlocksTemplate">
+  *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">
       <div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
@@ -59,17 +59,17 @@
       </div>
     </ng-container>
     <ng-template #placeholderBlock>
-      <ng-container *ngIf="block && block.placeholder; else loadingBlock">
+      <ng-container *ngIf="block && block.placeholder && !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]">
-
+ 
         </div>
       </ng-container>
     </ng-template>
     <ng-template #loadingBlock>
-      <ng-container *ngIf="block && block.loading">
-        <div class="flashing">
+      <ng-container *ngIf="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>
         </div>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss

@@ -137,6 +137,10 @@
   opacity: 1;
 }
 
+.loading .bitcoin-block.mined-block {
+  background: #2d3348;
+}
+
 @keyframes opacityPulse {
   0% {opacity: 0.7;}
   50% {opacity: 1.0;}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts

@@ -22,6 +22,8 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
   @Input() offset: number = 0;
   @Input() height: number = 0;
   @Input() count: number = 8;
+  @Input() loadingTip: boolean = false;
+  @Input() connected: boolean = true;
   
   specialBlocks = specialBlocks;
   network = '';