Merge pull request #2375 from mempool/nymkappa/bugfix/loading-spinner
Fix infitinite loading spinner and positioning
This commit is contained in:
		
						commit
						1971d5d6b6
					
				| @ -121,7 +121,7 @@ | ||||
|   <div *ngIf="!error"> | ||||
|     <div class="row"> | ||||
|       <div class="col-sm"> | ||||
|         <app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map> | ||||
|         <app-nodes-channels-map [style]="'nodepage'" [publicKey]="node.public_key" [hasLocation]="!!node.as_number"></app-nodes-channels-map> | ||||
|       </div> | ||||
|       <div class="col-sm"> | ||||
|         <app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart> | ||||
|  | ||||
| @ -105,6 +105,9 @@ | ||||
|   top: 50%; | ||||
|   left: calc(50% - 15px); | ||||
|   z-index: 100; | ||||
|   @media (max-width: 767.98px) { | ||||
|     top: 550px; | ||||
|   } | ||||
| } | ||||
| .loading-spinner.widget { | ||||
|   position: absolute; | ||||
| @ -116,3 +119,21 @@ | ||||
|     top: 250px; | ||||
|   } | ||||
| } | ||||
| .loading-spinner.nodepage { | ||||
|   position: absolute; | ||||
|   top: 200px; | ||||
|   z-index: 100; | ||||
|   width: 100%; | ||||
|   left: 0; | ||||
| } | ||||
| 
 | ||||
| .loading-spinner.channelpage { | ||||
|   position: absolute; | ||||
|   top: 400px; | ||||
|   z-index: 100; | ||||
|   width: 100%; | ||||
|   left: 0; | ||||
|   @media (max-width: 767.98px) { | ||||
|     top: 450px; | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -21,6 +21,7 @@ export class NodesChannelsMap implements OnInit { | ||||
|   @Input() publicKey: string | undefined; | ||||
|   @Input() channel: any[] = []; | ||||
|   @Input() fitContainer = false; | ||||
|   @Input() hasLocation = true; | ||||
|   @Output() readyEvent = new EventEmitter(); | ||||
| 
 | ||||
|   channelsObservable: Observable<any>;  | ||||
| @ -32,7 +33,7 @@ export class NodesChannelsMap implements OnInit { | ||||
|   channelColor = '#466d9d'; | ||||
|   channelCurve = 0; | ||||
|   nodeSize = 4; | ||||
|   isLoading = true; | ||||
|   isLoading = false; | ||||
| 
 | ||||
|   chartInstance = undefined; | ||||
|   chartOptions: EChartsOption = {}; | ||||
| @ -73,6 +74,11 @@ export class NodesChannelsMap implements OnInit { | ||||
|     this.channelsObservable = this.activatedRoute.paramMap | ||||
|      .pipe( | ||||
|        switchMap((params: ParamMap) => { | ||||
|         this.isLoading = true; | ||||
|         if (this.style === 'channelpage' && this.channel.length === 0 || !this.hasLocation) { | ||||
|           this.isLoading = false; | ||||
|         } | ||||
|              | ||||
|         return zip( | ||||
|           this.assetsService.getWorldMapJson$, | ||||
|           this.style !== 'channelpage' ? this.apiService.getChannelsGeo$(params.get('public_key') ?? undefined, this.style) : [''], | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user