Frontend - Improve web node loading (#873)

Author: directcuteo

.idea/vcs.xml

@@ -5,6 +5,7 @@
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
     "start:dev": "ng serve --configuration development",
+    "start:dev:mobile": "ng serve --configuration development --host 0.0.0.0",
     "build": "ng build",
     "build:prod": "ng build --configuration production",
     "tests": "npx cypress open --config baseUrl=http://localhost:4200",

frontend/package.json

@@ -1,11 +1,11 @@
 <div class="logo-header w-100 border-bottom fx-row-full-cent">
   <img ngSrc="assets/images/logo/logo-text.svg" height="40" width="136"/>
 </div>
-<div class="data-wrapper fx-col-full-cent">
-  <div class="header flex-column align-center mb-16 pb-12 pl-10 pr-10 text-center">
+<div class="data-wrapper flex-column flex-around align-center">
+  <div class="header flex-column align-center pl-10 pr-10 text-center mb-16">
     <div class="loading-webnode f-500">
       Produce blocks,
-      <span>&nbsp;right in your browser</span>
+      <span>right in your browser</span>
     </div>
 
     <div class="font-16 tertiary mt-16 font-16 f-300">
@@ -21,7 +21,7 @@
     </div>
   </div>
 
-  <div #progress class="progress w-100"></div>
+  <div #progress class="progress w-100 fx-row-full-cent"></div>
 
   <div class="mt-16 flex-column w-100 pl-10 pr-10">
     @for (item of loading; track $index) {

frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.html

@@ -17,10 +17,9 @@ $white: #000000;
 .data-wrapper {
   height: calc(100% - 56px - 72px);
   max-width: 568px;
+  padding: 10vw 0;
 
   .header {
-    margin-bottom: 56px;
-
     .loading-webnode {
       font-size: 24px;
       line-height: 32px;
@@ -40,8 +39,10 @@ $white: #000000;
   }
 
   .progress {
-    height: 380px;
-    margin: 64px 0;
+    min-height: 380px;
+    @media (max-width: 768px) {
+      min-height: 36vh;
+    }
   }
 }
 
@@ -80,9 +81,9 @@ $white: #000000;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 568px) {
   .font-16 {
-    font-size: 15px;
+    font-size: 14px;
   }
   .loading-webnode span {
     display: block;

frontend/src/app/features/webnode/web-node-demo-dashboard/web-node-demo-dashboard.component.scss

@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { untilDestroyed } from '@ngneat/until-destroy';
 import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
 import { WebNodeService } from '@core/services/web-node.service';
 import { GlobalErrorHandlerService } from '@openmina/shared';
 import { NgClass, NgForOf, NgIf, NgOptimizedImage } from '@angular/common';
 import { Router } from '@angular/router';
 import { getFirstFeature } from '@shared/constants/config';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 import { filter, switchMap, timer } from 'rxjs';
 import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner.component';
 import { FileProgressHelper } from '@core/helpers/file-progress.helper';
@@ -53,7 +53,7 @@ export interface WebNodeLoadingStep {
     ]),
   ],
 })
-export class WebNodeDemoDashboardComponent extends StoreDispatcher implements OnInit {
+export class WebNodeDemoDashboardComponent extends StoreDispatcher implements OnInit, AfterViewInit {
 
   protected readonly WebNodeStepStatus = WebNodeStepStatus;
   readonly loading: WebNodeLoadingStep[] = [
@@ -87,6 +87,9 @@ export class WebNodeDemoDashboardComponent extends StoreDispatcher implements On
     this.listenToErrorIssuing();
     this.checkWebNodeProgress();
     this.fetchPeersInformation();
+  }
+
+  ngAfterViewInit(): void {
     this.buildProgressBar();
   }
 
@@ -196,10 +199,10 @@ export class WebNodeDemoDashboardComponent extends StoreDispatcher implements On
         downloaded: (progress.downloaded / 1e6).toFixed(1),
         total: (progress.totalSize / 1e6).toFixed(1),
       };
-      // this step is only 1 out of 3. But it counts as 80% of the 100% progress.
-      // So we need to calculate the total progress based on the current step.
-      const totalProgress = (progress.progress * this.stepsPercentages[0]) / 100;
-      this.updateProgressBar(totalProgress);
+      if (this.svg) {
+        const totalProgress = (progress.progress * this.stepsPercentages[0]) / 100;
+        this.updateProgressBar(totalProgress);
+      }
       this.detect();
     });
   }
@@ -259,7 +262,8 @@ export class WebNodeDemoDashboardComponent extends StoreDispatcher implements On
 
     this.progressBar.append('text')
       .attr('text-anchor', 'middle')
-      .attr('dominant-baseline', 'middle')
+      .attr('alignment-baseline', 'central')
+      .attr('dominant-baseline', 'central')
       .attr('font-size', '40px')
       .attr('fill', 'var(--base-primary)')
       .attr('opacity', 0.8)