Improve users page loading experience

packages/builder/src/pages/builder/portal/users/users/index.svelte

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