Improve users page loading experience

This commit is contained in:
Andrew Kingston 2023-01-13 08:39:52 +00:00
parent 7f4978781d
commit e863b5af79
1 changed files with 55 additions and 57 deletions

View File

@ -35,7 +35,7 @@
}, },
}) })
let loaded = false let groupsLoaded = !$licensing.groupsEnabled || $groups?.length
let enrichedUsers = [] let enrichedUsers = []
let createUserModal, let createUserModal,
inviteConfirmationModal, inviteConfirmationModal,
@ -206,17 +206,15 @@
onMount(async () => { onMount(async () => {
try { try {
loaded = false
await groups.actions.init() await groups.actions.init()
loaded = true groupsLoaded = true
} catch (error) { } catch (error) {
notifications.error("Error fetching User Group data") notifications.error("Error fetching user group data")
} }
}) })
</script> </script>
{#if loaded && $fetch.loaded} <Layout noPadding gap="M">
<Layout noPadding gap="M">
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading>Users</Heading> <Heading>Users</Heading>
<Body>Add users and control who gets access to your published apps</Body> <Body>Add users and control who gets access to your published apps</Body>
@ -232,9 +230,9 @@
> >
Add users Add users
</Button> </Button>
<Button disabled={readonly} on:click={importUsersModal.show} secondary <Button disabled={readonly} on:click={importUsersModal.show} secondary>
>Import</Button Import
> </Button>
</ButtonGroup> </ButtonGroup>
<div class="controls-right"> <div class="controls-right">
<Search bind:value={searchEmail} placeholder="Search" /> <Search bind:value={searchEmail} placeholder="Search" />
@ -257,6 +255,7 @@
allowEditRows={false} allowEditRows={false}
allowSelectRows={!readonly} allowSelectRows={!readonly}
{customRenderers} {customRenderers}
loading={!$fetch.loaded || !groupsLoaded}
/> />
<div class="pagination"> <div class="pagination">
<Pagination <Pagination
@ -267,8 +266,7 @@
goToNextPage={fetch.nextPage} goToNextPage={fetch.nextPage}
/> />
</div> </div>
</Layout> </Layout>
{/if}
<Modal bind:this={createUserModal}> <Modal bind:this={createUserModal}>
<AddUserModal {showOnboardingTypeModal} /> <AddUserModal {showOnboardingTypeModal} />