Update loading state in preview overlay
This commit is contained in:
parent
b3e23562f0
commit
bbdb304fe4
1 changed files with 22 additions and 0 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue