Projected block loading spinner & WebGL detection

frontend/src/app/components/mempool-block/mempool-block.component.ts

@@ -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)
+}