From 940e2b5a940257bc965eea8808bea5482ecbf1a8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Jul 2024 15:53:40 +0100
Subject: [PATCH] Improve client loading states, skeleton and underlay

---
 .../[screenId]/_components/AppPreview.svelte  | 71 +++++++++----------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index a5d14062dc..0e2eb2ceac 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -246,13 +246,13 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="component-container">
+<div
+  class="component-container"
+  class:tablet={$previewStore.previewDevice === "tablet"}
+  class:mobile={$previewStore.previewDevice === "mobile"}
+>
   {#if loading}
-    <div
-      class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}
-      class:tablet={$previewStore.previewDevice === "tablet"}
-      class:mobile={$previewStore.previewDevice === "mobile"}
-    >
+    <div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
       <ClientAppSkeleton
         sideNav={$navigationStore?.navigation === "Left"}
         hideFooter
@@ -294,32 +294,13 @@
 />
 
 <style>
-  .loading {
-    position: absolute;
-    width: calc(100% - 12px);
-    height: calc(100% - 12px);
-    left: 6px;
-    top: 6px;
-  }
-
-  .loading.tablet {
-    width: calc(1024px + 6px);
-    max-height: calc(768px + 6px);
-  }
-
-  .loading.mobile {
-    width: calc(390px + 6px);
-    max-height: calc(844px + 6px);
-  }
-
   .component-container {
-    grid-row-start: middle;
-    grid-column-start: middle;
     display: grid;
     place-items: center;
     position: relative;
     margin: auto;
     height: 100%;
+    --client-padding: 6px;
   }
   .component-container iframe {
     border: 0;
@@ -328,6 +309,33 @@
     width: 100%;
     background-color: transparent;
   }
+
+  .loading,
+  .underlay {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: calc(100% - var(--client-padding) * 2);
+    height: calc(100% - var(--client-padding) * 2);
+  }
+  .tablet .loading,
+  .tablet .underlay {
+    width: 1024px;
+    height: 768px;
+  }
+  .mobile .loading,
+  .mobile .underlay {
+    width: 390px;
+    height: 844px;
+  }
+
+  .underlay {
+    background: var(--spectrum-global-color-gray-200);
+    z-index: -1;
+    padding: 2px;
+  }
+
   .center {
     position: absolute;
     width: 100%;
@@ -362,17 +370,6 @@
     height: 100%;
   }
 
-  .underlay {
-    position: absolute;
-    background: var(--spectrum-global-color-gray-200);
-    z-index: -1;
-    --offset: 2px;
-    width: calc(100% - 12px + 2 * var(--offset));
-    height: calc(100% - 12px + 2 * var(--offset));
-    left: calc(6px - var(--offset));
-    top: calc(6px - var(--offset));
-  }
-
   .add-component {
     position: absolute;
     bottom: 20px;