From 48af95d72213429af11fc4dc2c9b63e6fa8e5b1d Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Sat, 4 Nov 2023 17:48:27 +0000
Subject: [PATCH] SSR: placeholder bowtie diagram while loading

---
 .../tx-bowtie-graph/tx-bowtie-graph.component.html     | 10 +++++++++-
 .../tx-bowtie-graph/tx-bowtie-graph.component.ts       |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index 14e49e21b..9f491affc 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -1,5 +1,13 @@
 <div class="bowtie-graph">
-  <svg *ngIf="inputs && outputs" class="bowtie" [class.rtl]="dir === 'rtl'" [attr.height]="(height + 10) + 'px'" [attr.width]="width + 'px'">
+  <svg
+    *ngIf="inputs && outputs"
+    class="bowtie"
+    [class.rtl]="dir === 'rtl'"
+    [attr.height]="(height + 10) + 'px'"
+    [attr.width]="stateService.isBrowser ? (width + 'px') : '100%'"
+    [attr.viewBox]="stateService.isBrowser ? null : ('0 0 ' + width + ' ' + (height + 10))"
+    [attr.preserveAspectRatio]="stateService.isBrowser ? null : 'none'"
+  >
     <defs>
       <marker id="input-arrow" viewBox="-5 -5 10 10"
           refX="0" refY="0"
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
index 9aa9fb275..f59cd1a36 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -101,7 +101,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   constructor(
     private router: Router,
     private relativeUrlPipe: RelativeUrlPipe,
-    private stateService: StateService,
+    public stateService: StateService,
     private electrsApiService: ElectrsApiService,
     private assetsService: AssetsService,
     @Inject(LOCALE_ID) private locale: string,