Projected block loading spinner & WebGL detection

This commit is contained in:
Mononaut
2022-05-31 22:25:09 +00:00
parent 8a20ae15cc
commit 155e005a7f
6 changed files with 72 additions and 19 deletions

View File

@@ -68,10 +68,11 @@
</ng-container>
</tbody>
</table>
<app-fee-distribution-graph [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
<app-fee-distribution-graph *ngIf="webGlEnabled" [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
</div>
<div class="col-md chart-container">
<app-mempool-block-overview [index]="mempoolBlockIndex" (txPreviewEvent)="setTxPreview($event)"></app-mempool-block-overview>
<app-mempool-block-overview *ngIf="webGlEnabled" [index]="mempoolBlockIndex" (txPreviewEvent)="setTxPreview($event)"></app-mempool-block-overview>
<app-fee-distribution-graph *ngIf="!webGlEnabled" [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
</div>
</div>
</div>

View File

@@ -19,13 +19,16 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
mempoolBlock$: Observable<MempoolBlock>;
ordinal$: BehaviorSubject<string> = new BehaviorSubject('');
previewTx: TransactionStripped | void;
webGlEnabled: boolean;
constructor(
private route: ActivatedRoute,
public stateService: StateService,
private seoService: SeoService,
private websocketService: WebsocketService,
) { }
) {
this.webGlEnabled = detectWebGL();
}
ngOnInit(): void {
this.websocketService.want(['blocks', 'mempool-blocks']);
@@ -81,3 +84,9 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
this.previewTx = event
}
}
function detectWebGL () {
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
return (gl && gl instanceof WebGLRenderingContext)
}