FIX: Improved the visuals of the visit card

front/src/Components/VisitCard/VisitCard.svelte

@@ -1,39 +1,64 @@
 <script lang="typescript">
     import { fly } from 'svelte/transition';
     import {requestVisitCardsStore} from "../../Stores/GameStore";
+    import {onMount} from "svelte";
     
     export let visitCardUrl: string;
+    let w = '500px';
+    let h = '250px';
+    let hidden = true;
+    let cvIframe;
     
     function closeCard() {
         requestVisitCardsStore.set(null);
     }
+    
+    function handleIframeMessage(message:any) {
+        if (message.data.type === 'cvIframeSize') {
+            w = (message.data.data.w) + 'px';
+            h = (message.data.data.h) + 'px';
+        }
+    }
+    
+    onMount(() => {
+        cvIframe.onload = () => hidden = false
+        cvIframe.onerror = () => hidden = false
+    })
 </script>
 
 <style lang="scss">
+
+  .loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    margin:auto;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
   .visitCard {
     pointer-events: all;
     margin-left: auto;
     margin-right: auto;
-    width: 530px;
     margin-top: 200px;
-    max-width: 100vw;
-    
-    .defaultCard {
-      border-radius: 5px;
-      border: 2px black solid;
-      background-color: whitesmoke;
-      width: 530px;
-      
-      header {
-        padding: 5px;
-      }
-    }
+    max-width: 80vw;
 
     iframe {
       border: 0;
-      width: 530px;
-      height: 270px;
+      max-width: 80vw;
       overflow: hidden;
+      
+      &.hidden {
+        visibility: hidden;
+        position: absolute;
+      }
     }
 
     button {
@@ -43,9 +68,17 @@
 </style>
 
 
-<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
-    <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
-    <div class="buttonContainer">
-        <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
-    </div>
+<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}" style="width: {w}">
+    {#if hidden}
+        <div class="loader"></div>
+    {/if}
+    <iframe title="visitCard" src={visitCardUrl} allow="clipboard-read; clipboard-write self {visitCardUrl}" style="width: {w}; height: {h}" class:hidden={hidden} bind:this={cvIframe}></iframe>
+    {#if !hidden}
+        <div class="buttonContainer">
+            <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
+        </div>
+    {/if}
+    
 </section>
+
+<svelte:window on:message={handleIframeMessage}/>