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 0ce9e096f2..a5d14062dc 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
@@ -275,6 +275,7 @@
src="/app/preview"
class:hidden={loading || error}
/>
+
.loading {
position: absolute;
- container-type: inline-size;
- width: 100%;
- height: 100%;
- border: 2px solid transparent;
- box-sizing: border-box;
+ width: calc(100% - 12px);
+ height: calc(100% - 12px);
+ left: 6px;
+ top: 6px;
}
.loading.tablet {
@@ -318,7 +318,6 @@
display: grid;
place-items: center;
position: relative;
- overflow: hidden;
margin: auto;
height: 100%;
}
@@ -363,6 +362,17 @@
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;
diff --git a/packages/frontend-core/src/components/ClientAppSkeleton.svelte b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
index a1c90d2db7..f867fccddb 100644
--- a/packages/frontend-core/src/components/ClientAppSkeleton.svelte
+++ b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
@@ -58,7 +58,6 @@
height: 100%;
display: flex;
flex-direction: column;
- border-radius: 4px;
overflow: hidden;
background-color: var(--spectrum-global-color-gray-200);
}