Optimise loading in overview tab and add transition to dash card header
This commit is contained in:
parent
50c04c801f
commit
e18e941449
|
@ -37,6 +37,7 @@
|
||||||
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
transition: background-color 130ms ease-out;
|
||||||
}
|
}
|
||||||
.dash-card-body {
|
.dash-card-body {
|
||||||
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
|
padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
|
||||||
|
|
|
@ -27,22 +27,26 @@
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
let appEditor, appEditorPromise
|
let appEditor
|
||||||
|
|
||||||
$: updateAvailable = clientPackage.version !== $store.version
|
$: updateAvailable = clientPackage.version !== $store.version
|
||||||
$: isPublished = app && app?.status === AppStatus.DEPLOYED
|
$: isPublished = app?.status === AppStatus.DEPLOYED
|
||||||
$: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
|
$: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
|
||||||
$: appEditorText = appEditor?.firstName || appEditor?.email
|
$: appEditorText = appEditor?.firstName || appEditor?.email
|
||||||
$: fetchAppEditor(appEditorId)
|
$: fetchAppEditor(appEditorId)
|
||||||
$: appUsers = $appUsersFetch.rows || []
|
$: appUsers = $appUsersFetch.rows || []
|
||||||
|
$: appUsersFetch.update({
|
||||||
|
query: {
|
||||||
|
appId: apps.getProdAppID(app.devId),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
const unpublishApp = () => {
|
const unpublishApp = () => {
|
||||||
dispatch("unpublish", app)
|
dispatch("unpublish", app)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchAppEditor(editorId) {
|
async function fetchAppEditor(editorId) {
|
||||||
appEditorPromise = users.get(editorId)
|
appEditor = await users.get(editorId)
|
||||||
appEditor = await appEditorPromise
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const getInitials = user => {
|
const getInitials = user => {
|
||||||
|
@ -89,11 +93,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DashCard>
|
</DashCard>
|
||||||
|
{#if appEditor}
|
||||||
<DashCard title={"Last Edited"} dataCy={"edited-by"}>
|
<DashCard title={"Last Edited"} dataCy={"edited-by"}>
|
||||||
<div class="last-edited-content">
|
<div class="last-edited-content">
|
||||||
{#await appEditorPromise}
|
|
||||||
<Avatar size="M" initials={"-"} />
|
|
||||||
{:then _}
|
|
||||||
<div class="updated-by">
|
<div class="updated-by">
|
||||||
{#if appEditor}
|
{#if appEditor}
|
||||||
<Avatar size="M" initials={getInitials(appEditor)} />
|
<Avatar size="M" initials={getInitials(appEditor)} />
|
||||||
|
@ -102,9 +104,6 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{:catch error}
|
|
||||||
<p>Could not fetch user: {error.message}</p>
|
|
||||||
{/await}
|
|
||||||
<div class="last-edit-text">
|
<div class="last-edit-text">
|
||||||
{#if app}
|
{#if app}
|
||||||
{processStringSync(
|
{processStringSync(
|
||||||
|
@ -118,6 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DashCard>
|
</DashCard>
|
||||||
|
{/if}
|
||||||
<DashCard
|
<DashCard
|
||||||
title={"App Version"}
|
title={"App Version"}
|
||||||
showIcon={true}
|
showIcon={true}
|
||||||
|
|
Loading…
Reference in New Issue