Improve client loading states, skeleton and underlay
This commit is contained in:
parent
8540f4020b
commit
940e2b5a94
1 changed files with 34 additions and 37 deletions
|
@ -246,13 +246,13 @@
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- 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}
|
{#if loading}
|
||||||
<div
|
<div class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}>
|
||||||
class={`loading ${$themeStore.baseTheme} ${$themeStore.theme}`}
|
|
||||||
class:tablet={$previewStore.previewDevice === "tablet"}
|
|
||||||
class:mobile={$previewStore.previewDevice === "mobile"}
|
|
||||||
>
|
|
||||||
<ClientAppSkeleton
|
<ClientAppSkeleton
|
||||||
sideNav={$navigationStore?.navigation === "Left"}
|
sideNav={$navigationStore?.navigation === "Left"}
|
||||||
hideFooter
|
hideFooter
|
||||||
|
@ -294,32 +294,13 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<style>
|
<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 {
|
.component-container {
|
||||||
grid-row-start: middle;
|
|
||||||
grid-column-start: middle;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
--client-padding: 6px;
|
||||||
}
|
}
|
||||||
.component-container iframe {
|
.component-container iframe {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -328,6 +309,33 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: transparent;
|
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 {
|
.center {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -362,17 +370,6 @@
|
||||||
height: 100%;
|
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 {
|
.add-component {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
|
|
Loading…
Reference in a new issue