properly display chart in editing

src/ChartEdit.svelte

@@ -4,9 +4,40 @@
   import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
   import { writeText } from 'clipboard-polyfill';
   import { Button, TextField, Loading } from 'attractions';
+  import Chart from './Chart.svelte';
+  import { onMount } from 'svelte';
+  import { currentChartID } from './stores';
 
   let isLoaded = false;
   let error = null;
+
+  let name = '';
+  let top = '';
+  let left = '';
+  let right = '';
+  let bot = '';
+
+  let images = [];
+
+  onMount(() => {
+    let s = new WebSocket('ws://localhost:5252/connect?id=' + $currentChartID);
+    s.addEventListener('message', (e) => {
+      let data = JSON.parse(e.data);
+      if (!isLoaded) {
+        name = data.name || '';
+        top = data.topText || '';
+        left = data.leftText || '';
+        right = data.rightText || '';
+        bot = data.bottomText || '';
+        isLoaded = true;
+      } else {
+        images.push(...data);
+      }
+    });
+    s.addEventListener('error', (e) => {
+      error = e;
+    });
+  });
 </script>
 
 <style>
@@ -49,8 +80,13 @@
     </div>
   {/if}
 
-  {#if !isLoaded}
+  {#if !isLoaded && !error}
     <br><br><br>
     <Loading/>
+  {:else if isLoaded}
+    {#key name + top + left + right + bot}
+      {name}
+      <Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize=14/>
+    {/key}
   {/if}
 </div>