CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-02 18:51:36 +12:00
Code Issues Projects Releases Wiki Activity

Update loading state in preview overlay

Browse source
This commit is contained in:
Andrew Kingston 2023-06-08 15:51:24 +01:00
parent b3e23562f0
commit bbdb304fe4
1 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
View file

@ -2,6 +2,7 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import { fade, fly } from "svelte/transition" import { fade, fly } from "svelte/transition"
import { store, selectedScreen } from "builderStore" import { store, selectedScreen } from "builderStore"
import { ProgressCircle } from "@budibase/bbui"
$: route = $selectedScreen?.routing.route || "/" $: route = $selectedScreen?.routing.route || "/"
$: src = `/${$store.appId}#${route}` $: src = `/${$store.appId}#${route}`
@ -32,6 +33,10 @@
class="container spectrum {$store.theme}" class="container spectrum {$store.theme}"
transition:fly={{ duration: 260, y: 130 }} transition:fly={{ duration: 260, y: 130 }}
> >
<div class="header placeholder" />
<div class="loading placeholder">
<ProgressCircle />
</div>
<iframe {src} /> <iframe {src} />
</div> </div>
</div> </div>
@ -65,5 +70,22 @@
width: 100%; width: 100%;
border: none; border: none;
outline: 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> </style>