Improve document route performance

web/app/components/custom-editable-field.hbs

@@ -3,7 +3,7 @@
     data-test-custom-string-field
     @value={{get @document @field}}
     @onChange={{@onChange}}
-    @loading={{@loading}}
+    @isSaving={{@isSaving}}
     @disabled={{@disabled}}
   >
     <:default as |F|>
@@ -27,41 +27,40 @@
   </EditableField>
 
 {{else if this.typeIsPeople}}
-  <EditableField
-    data-test-custom-people-field
-    @value={{get @attributes "value"}}
-    @onChange={{@onChange}}
-    @loading={{@loading}}
-    @disabled={{@disabled}}
-  >
-    <:default>
-      {{#if this.people.length}}
-        <ol>
-          {{#each this.people as |person|}}
-            <li class="whitespace-nowrap">
-              {{#if person.imgURL}}
-                <img
-                  src="{{person.imgURL}}"
-                  class="h-4 w-4 rounded-full align-middle"
+  <HermesUsers class="w-full" @emails={{this.emails}} as |h|>
+    <EditableField
+      data-test-custom-people-field
+      @value={{get @attributes "value"}}
+      @onChange={{@onChange}}
+      @isSaving={{@isSaving}}
+    >
+      <:default>
+        {{#if h.users.length}}
+          <ol class="person-list">
+            {{#each h.users as |user|}}
+              <li>
+                <Person
+                  @imageIsLoading={{h.isLoading}}
+                  @imgURL={{user.imgURL}}
+                  @email={{user.email}}
                 />
-              {{/if}}
-              {{person.email}}
-            </li>
-          {{/each}}
-        </ol>
-      {{else}}
-        <CustomEditableFields::EmptyState />
-      {{/if}}
-    </:default>
-    <:editing as |F|>
-      <Inputs::PeopleSelect
-        {{autofocus targetChildren=true}}
-        class="multiselect--narrow"
-        @selected={{this.people}}
-        @onChange={{this.updateEmails}}
-        {{click-outside (fn F.update this.people)}}
-        data-test-custom-people-field-input
-      />
-    </:editing>
-  </EditableField>
+              </li>
+            {{/each}}
+          </ol>
+        {{else}}
+          <CustomEditableFields::EmptyState />
+        {{/if}}
+      </:default>
+      <:editing as |F|>
+        <Inputs::PeopleSelect
+          {{autofocus targetChildren=true}}
+          class="multiselect--narrow"
+          @selected={{h.users}}
+          @onChange={{h.updateUsers}}
+          {{click-outside (fn F.update h.users)}}
+          data-test-custom-people-field-input
+        />
+      </:editing>
+    </EditableField>
+  </HermesUsers>
 {{/if}}

web/app/components/custom-editable-field.ts

@@ -1,27 +1,18 @@
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import {
-  CustomEditableField,
-  HermesDocument,
-  HermesUser,
-} from "hermes/types/document";
+import { CustomEditableField, HermesDocument } from "hermes/types/document";
 
 interface CustomEditableFieldComponentSignature {
   Args: {
     document: HermesDocument;
     field: string;
     attributes: CustomEditableField;
     onChange: (value: any) => void;
-    loading?: boolean;
+    isSaving?: boolean;
     disabled?: boolean;
   };
 }
 
 export default class CustomEditableFieldComponent extends Component<CustomEditableFieldComponentSignature> {
-  @tracked protected emails: string | string[] =
-    this.args.attributes.value || [];
-
   protected get typeIsString(): boolean {
     return this.args.attributes.type === "STRING";
   }
@@ -30,17 +21,15 @@ export default class CustomEditableFieldComponent extends Component<CustomEditab
     return this.args.attributes.type === "PEOPLE";
   }
 
-  protected get people(): HermesUser[] {
-    let emails = this.emails instanceof Array ? this.emails : [this.emails];
-    return emails.map((email: string) => {
-      return { email, imgURL: null };
-    });
-  }
-
-  @action protected updateEmails(people: HermesUser[]) {
-    this.emails = people.map((person: HermesUser) => {
-      return person.email;
-    });
+  protected get emails(): string[] {
+    if (this.args.attributes.value instanceof Array) {
+      return this.args.attributes.value;
+    }
+    if (this.args.attributes.value) {
+      return [this.args.attributes.value];
+    } else {
+      return [];
+    }
   }
 }
 

web/app/components/document/index.hbs

@@ -1,4 +1,4 @@
-<div class="flex flex-1 space-x-px max-h-screen">
+<div class="flex max-h-screen flex-1 space-x-px">
   <div
     class="sidebar shrink-0 {{if this.sidebarIsCollapsed 'collapsed' 'w-72'}}"
   >
@@ -10,20 +10,20 @@
       <Document::Sidebar
         @profile={{this.authenticatedUser.info}}
         @document={{@document}}
-        @deleteDraft={{perform this.deleteDraft}}
         @docType={{@docType}}
+        @deleteDraft={{perform this.deleteDraft}}
         @isCollapsed={{this.sidebarIsCollapsed}}
         @toggleCollapsed={{this.toggleSidebarCollapsedState}}
       />
     {{/unless}}
   </div>
 
-  <div class="pt-4 pb-4 pr-4 w-full">
+  <div class="w-full pt-4 pb-4 pr-4">
     <Hds::Card::Container
       @level="high"
       @hasBorder={{true}}
       @overflow="hidden"
-      class="flex items-center justify-center h-full"
+      class="flex h-full items-center justify-center"
     >
       {{#unless @modelIsChanging}}
         {{!

web/app/components/document/index.ts

@@ -9,11 +9,14 @@ import FlashMessageService from "ember-cli-flash/services/flash-messages";
 import RecentlyViewedDocsService from "hermes/services/recently-viewed-docs";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { HermesDocumentType } from "hermes/types/document-type";
 
 interface DocumentIndexComponentSignature {
-  document: HermesDocument;
-  docType: string;
-  modelIsChanging: boolean;
+  Args: {
+    document: HermesDocument;
+    modelIsChanging: boolean;
+    docType: Promise<HermesDocumentType>;
+  };
 }
 
 export default class DocumentIndexComponent extends Component<DocumentIndexComponentSignature> {