From bbdb304fe43cf8a30035d65d7eb482944219a112 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 8 Jun 2023 15:51:24 +0100
Subject: [PATCH] Update loading state in preview overlay

---
 .../_components/PreviewOverlay.svelte         | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
index 1715b54ba0..3e01ec2526 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
@@ -2,6 +2,7 @@
   import { onMount } from "svelte"
   import { fade, fly } from "svelte/transition"
   import { store, selectedScreen } from "builderStore"
+  import { ProgressCircle } from "@budibase/bbui"
 
   $: route = $selectedScreen?.routing.route || "/"
   $: src = `/${$store.appId}#${route}`
@@ -32,6 +33,10 @@
     class="container spectrum {$store.theme}"
     transition:fly={{ duration: 260, y: 130 }}
   >
+    <div class="header placeholder" />
+    <div class="loading placeholder">
+      <ProgressCircle />
+    </div>
     <iframe {src} />
   </div>
 </div>
@@ -65,5 +70,22 @@
     width: 100%;
     border: none;
     outline: none;
+    z-index: 1;
+  }
+  .header {
+    height: 60px;
+    width: 100%;
+    background: black;
+    top: 0;
+    position: absolute;
+  }
+  .loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateY(-50%) translateX(-50%);
+  }
+  .placeholder {
+    z-index: 0;
   }
 </style>