small UX updates to improve user addition and perceived loading of builder

packages/builder/src/components/deploy/VersionModal.svelte

@@ -24,7 +24,7 @@
   let updateModal
 
   $: appId = $store.appId
-  $: updateAvailable = clientPackage.version !== $store.version
+  $: updateAvailable = clientPackage.version && $store.version && clientPackage.version !== $store.version
   $: revertAvailable = $store.revertableVersion != null
 
   const refreshAppPackage = async () => {

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -25,6 +25,7 @@
   let rendered = false
   let inviting = false
   let searchFocus = false
+  let userSearchInput
 
   let appInvites = []
   let filteredInvites = []
@@ -346,8 +347,15 @@
 
   onMount(() => {
     rendered = true
+    searchFocus = true
   })
 
+  function handleKeyDown(evt) {
+    if (evt.key === "Enter" && queryIsEmail && !inviting) {
+      onInviteUser()
+    }
+  }
+
   const userTitle = user => {
     if (user.admin?.global) {
       return "Admin"
@@ -370,6 +378,8 @@
   }
 </script>
 
+<svelte:window on:keydown={handleKeyDown} />
+
 <div
   id="builder-side-panel-container"
   class:open={$store.builderSidePanel}
@@ -403,6 +413,7 @@
         autocomplete="off"
         disabled={inviting}
         value={query}
+        autofocus
         on:input={e => {
           query = e.target.value.trim()
         }}

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -120,10 +120,6 @@
   })
 </script>
 
-{#await promise}
-  <!-- This should probably be some kind of loading state? -->
-  <div class="loading" />
-{:then _}
 <TourPopover />
 
 {#if $store.builderSidePanel}
@@ -146,8 +142,7 @@
           Overview
         </MenuItem>
         <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/access`)}
+          on:click={() => $goto(`../../portal/overview/${application}/access`)}
         >
           Access
         </MenuItem>
@@ -158,8 +153,7 @@
           Automation history
         </MenuItem>
         <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/backups`)}
+          on:click={() => $goto(`../../portal/overview/${application}/backups`)}
         >
           Backups
         </MenuItem>
@@ -171,13 +165,12 @@
           Name and URL
         </MenuItem>
         <MenuItem
-            on:click={() =>
-              $goto(`../../portal/overview/${application}/version`)}
+          on:click={() => $goto(`../../portal/overview/${application}/version`)}
         >
           Version
         </MenuItem>
       </ActionMenu>
-        <Heading size="XS">{$store.name || "App"}</Heading>
+      <Heading size="XS">{$store.name}</Heading>
     </div>
     <div class="topcenternav">
       <Tabs {selected} size="M">
@@ -198,11 +191,15 @@
       <AppActions {application} />
     </div>
   </div>
+  {#await promise}
+    <!-- This should probably be some kind of loading state? -->
+    <div class="loading" />
+  {:then _}
     <slot />
-  </div>
   {:catch error}
     <p>Something went wrong: {error.message}</p>
   {/await}
+</div>
 
 <style>
   .loading {