From 0bbe0d729cf5db90987a972dec1ff3655ba76d22 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Monroy Date: Fri, 18 Oct 2024 13:08:42 -0400 Subject: [PATCH] chore(edit-content): improve load time in edit content form (#30392) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Proposed Changes #30389 ### Summary This pull request includes significant changes to the `dot-edit-content-field` component in the `core-web` library. The main updates involve deferring the rendering of various field components and removing the now unnecessary `DotEditContentFieldsModule`. ### Rendering Optimization: * Added `@defer (on immediate)` directive to defer the rendering of multiple field components in `dot-edit-content-field.component.html` to improve performance. (`core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html`) Screenshot 2024-10-18 at 10 05 57 AM ### Module Refactoring: * Removed the `DotEditContentFieldsModule` and updated the imports to include individual field components directly in `dot-edit-content-field.component.ts`. (`core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts`) [[1]](diffhunk://#diff-f03434ad88316542a23c3fb0bf50b6650130632c3e7953d7ee3c882cb5950d06L9-R22) [[2]](diffhunk://#diff-f03434ad88316542a23c3fb0bf50b6650130632c3e7953d7ee3c882cb5950d06L30-R54) * Deleted the now redundant `DotEditContentFieldsModule` file. (`core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts`) ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Screenshots With all fields, each field is loaded only when necessary. ![Frame 10](https://github.com/user-attachments/assets/2514cbbc-5758-40e4-9b7b-46a31a7fc791) When the user selects a few fields, only those fields are loaded ![Frame 11](https://github.com/user-attachments/assets/2fe4475c-eec1-4b03-90dd-5e5ba6ac3154) --- .../dot-edit-content-field.component.html | 162 +++++++++++------- .../dot-edit-content-field.component.ts | 28 ++- .../fields/dot-edit-content-fields.module.ts | 53 ------ .../src/lib/pipes/truncate-path.spec.ts | 2 +- 4 files changed, 126 insertions(+), 119 deletions(-) delete mode 100644 core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html index 4c61af5237db..84e0eeb93eb8 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html @@ -8,103 +8,139 @@ @switch (field.fieldType) { @case (fieldTypes.SELECT) { - + @defer (on immediate) { + + } } @case (fieldTypes.RADIO) { - + @defer (on immediate) { + + } } @case (fieldTypes.TEXT) { - + @defer (on immediate) { + + } } @case (fieldTypes.TEXTAREA) { - + @defer (on immediate) { + + } } @case (fieldTypes.CHECKBOX) { - + @defer (on immediate) { + + } } @case (fieldTypes.MULTI_SELECT) { - + @defer (on immediate) { + + } } @case (calendarTypes.includes(field.fieldType) ? field.fieldType : '') { - + @defer (on immediate) { + + } } @case (fieldTypes.TAG) { - + @defer (on immediate) { + + } } @case (fieldTypes.JSON) { - + @defer (on immediate) { + + } } @case (fieldTypes.BINARY) { - + @defer (on immediate) { + + } } @case (fieldTypes.CUSTOM_FIELD) { - + @defer (on immediate) { + + } } @case (fieldTypes.BLOCK_EDITOR) { - + @defer (on immediate) { + + } } @case (fieldTypes.KEY_VALUE) { - + @defer (on immediate) { + + } } @case (fieldTypes.WYSIWYG) { - + @defer (on immediate) { + + } } @case (fieldTypes.HOST_FOLDER) { - + @defer (on immediate) { + + } } @case (fieldTypes.CATEGORY) { - + @defer (on immediate) { + + } } @case (fieldTypes.FILE) { - + @defer (on immediate) { + + } } @case (fieldTypes.IMAGE) { - + @defer (on immediate) { + + } } } @if (field.hint) { diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts index a6560dd3c404..511ad1382b37 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts @@ -6,9 +6,20 @@ import { DotCMSContentlet, DotCMSContentTypeField } from '@dotcms/dotcms-models' import { DotFieldRequiredDirective } from '@dotcms/ui'; import { DotEditContentBinaryFieldComponent } from '../../fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component'; -import { DotEditContentFieldsModule } from '../../fields/dot-edit-content-fields.module'; +import { DotEditContentCalendarFieldComponent } from '../../fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component'; +import { DotEditContentCategoryFieldComponent } from '../../fields/dot-edit-content-category-field/dot-edit-content-category-field.component'; +import { DotEditContentCheckboxFieldComponent } from '../../fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component'; +import { DotEditContentCustomFieldComponent } from '../../fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component'; import { DotEditContentFileFieldComponent } from '../../fields/dot-edit-content-file-field/dot-edit-content-file-field.component'; +import { DotEditContentHostFolderFieldComponent } from '../../fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component'; +import { DotEditContentJsonFieldComponent } from '../../fields/dot-edit-content-json-field/dot-edit-content-json-field.component'; import { DotEditContentKeyValueComponent } from '../../fields/dot-edit-content-key-value/dot-edit-content-key-value.component'; +import { DotEditContentMultiSelectFieldComponent } from '../../fields/dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component'; +import { DotEditContentRadioFieldComponent } from '../../fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component'; +import { DotEditContentSelectFieldComponent } from '../../fields/dot-edit-content-select-field/dot-edit-content-select-field.component'; +import { DotEditContentTagFieldComponent } from '../../fields/dot-edit-content-tag-field/dot-edit-content-tag-field.component'; +import { DotEditContentTextAreaComponent } from '../../fields/dot-edit-content-text-area/dot-edit-content-text-area.component'; +import { DotEditContentTextFieldComponent } from '../../fields/dot-edit-content-text-field/dot-edit-content-text-field.component'; import { DotEditContentWYSIWYGFieldComponent } from '../../fields/dot-edit-content-wysiwyg-field/dot-edit-content-wysiwyg-field.component'; import { CALENDAR_FIELD_TYPES } from '../../models/dot-edit-content-field.constant'; import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum'; @@ -27,7 +38,20 @@ import { FIELD_TYPES } from '../../models/dot-edit-content-field.enum'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [ ReactiveFormsModule, - DotEditContentFieldsModule, + DotEditContentTextAreaComponent, + DotEditContentRadioFieldComponent, + DotEditContentSelectFieldComponent, + DotEditContentTextFieldComponent, + DotEditContentCalendarFieldComponent, + DotEditContentTagFieldComponent, + DotEditContentCheckboxFieldComponent, + DotEditContentMultiSelectFieldComponent, + DotEditContentBinaryFieldComponent, + DotEditContentJsonFieldComponent, + DotEditContentCustomFieldComponent, + DotEditContentWYSIWYGFieldComponent, + DotEditContentHostFolderFieldComponent, + DotEditContentCategoryFieldComponent, DotFieldRequiredDirective, BlockEditorModule, DotEditContentBinaryFieldComponent, diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts deleted file mode 100644 index 45be7ca6143e..000000000000 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { DotEditContentBinaryFieldComponent } from './dot-edit-content-binary-field/dot-edit-content-binary-field.component'; -import { DotEditContentCalendarFieldComponent } from './dot-edit-content-calendar-field/dot-edit-content-calendar-field.component'; -import { DotEditContentCategoryFieldComponent } from './dot-edit-content-category-field/dot-edit-content-category-field.component'; -import { DotEditContentCheckboxFieldComponent } from './dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component'; -import { DotEditContentCustomFieldComponent } from './dot-edit-content-custom-field/dot-edit-content-custom-field.component'; -import { DotEditContentHostFolderFieldComponent } from './dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component'; -import { DotEditContentJsonFieldComponent } from './dot-edit-content-json-field/dot-edit-content-json-field.component'; -import { DotEditContentMultiSelectFieldComponent } from './dot-edit-content-multi-select-field/dot-edit-content-multi-select-field.component'; -import { DotEditContentRadioFieldComponent } from './dot-edit-content-radio-field/dot-edit-content-radio-field.component'; -import { DotEditContentSelectFieldComponent } from './dot-edit-content-select-field/dot-edit-content-select-field.component'; -import { DotEditContentTagFieldComponent } from './dot-edit-content-tag-field/dot-edit-content-tag-field.component'; -import { DotEditContentTextAreaComponent } from './dot-edit-content-text-area/dot-edit-content-text-area.component'; -import { DotEditContentTextFieldComponent } from './dot-edit-content-text-field/dot-edit-content-text-field.component'; -import { DotEditContentWYSIWYGFieldComponent } from './dot-edit-content-wysiwyg-field/dot-edit-content-wysiwyg-field.component'; - -@NgModule({ - declarations: [], - imports: [ - DotEditContentTextAreaComponent, - DotEditContentRadioFieldComponent, - DotEditContentSelectFieldComponent, - DotEditContentTextFieldComponent, - DotEditContentCalendarFieldComponent, - DotEditContentTagFieldComponent, - DotEditContentCheckboxFieldComponent, - DotEditContentMultiSelectFieldComponent, - DotEditContentBinaryFieldComponent, - DotEditContentJsonFieldComponent, - DotEditContentCustomFieldComponent, - DotEditContentWYSIWYGFieldComponent, - DotEditContentHostFolderFieldComponent, - DotEditContentCategoryFieldComponent - ], - exports: [ - DotEditContentTextAreaComponent, - DotEditContentRadioFieldComponent, - DotEditContentSelectFieldComponent, - DotEditContentTextFieldComponent, - DotEditContentCalendarFieldComponent, - DotEditContentTagFieldComponent, - DotEditContentCheckboxFieldComponent, - DotEditContentMultiSelectFieldComponent, - DotEditContentBinaryFieldComponent, - DotEditContentJsonFieldComponent, - DotEditContentCustomFieldComponent, - DotEditContentWYSIWYGFieldComponent, - DotEditContentHostFolderFieldComponent, - DotEditContentCategoryFieldComponent - ] -}) -export class DotEditContentFieldsModule {} diff --git a/core-web/libs/edit-content/src/lib/pipes/truncate-path.spec.ts b/core-web/libs/edit-content/src/lib/pipes/truncate-path.spec.ts index 09085c8d8ded..3cf05a7379a2 100644 --- a/core-web/libs/edit-content/src/lib/pipes/truncate-path.spec.ts +++ b/core-web/libs/edit-content/src/lib/pipes/truncate-path.spec.ts @@ -1,4 +1,4 @@ -import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator'; +import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator/jest'; import { TruncatePathPipe } from './truncate-path.pipe';