Optimise loading in overview tab and add transition to dash card header

This commit is contained in:
Andrew Kingston 2022-08-08 12:25:49 +01:00
parent 3392f97264
commit dbdfb9cb83
2 changed files with 25 additions and 24 deletions

View File

@ -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);

View File

@ -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}