Skip to content

Commit

Permalink
chore(edit-content): improve load time in edit content form (#30392)
Browse files Browse the repository at this point in the history 
### 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`)

<img width="780" alt="Screenshot 2024-10-18 at 10 05 57 AM"
src="https://github.com/user-attachments/assets/aa054965-9a20-4667-a32c-e9fa8bf5306c">


### 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)
  • Loading branch information
@nicobytes
nicobytes authored Oct 18, 2024
1 parent 652ad3d commit 017c6b8
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 119 deletions.
162 changes: 99 additions & 63 deletions ...t-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,103 +8,139 @@

@switch (field.fieldType) {
@case (fieldTypes.SELECT) {
<dot-edit-content-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.RADIO) {
<dot-edit-content-radio-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-radio-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.TEXT) {
<dot-edit-content-text-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-text-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.TEXTAREA) {
<dot-edit-content-text-area
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-text-area
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.CHECKBOX) {
<dot-edit-content-checkbox-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-checkbox-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.MULTI_SELECT) {
<dot-edit-content-multi-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-multi-select-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (calendarTypes.includes(field.fieldType) ? field.fieldType : '') {
<dot-edit-content-calendar-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-calendar-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.TAG) {
<dot-edit-content-tag-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-tag-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.JSON) {
<dot-edit-content-json-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-json-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.BINARY) {
<dot-edit-content-binary-field
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-binary-field
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.CUSTOM_FIELD) {
<dot-edit-content-custom-field
[field]="field"
[contentType]="contentType"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-custom-field
[field]="field"
[contentType]="contentType"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.BLOCK_EDITOR) {
<dot-block-editor
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-block-editor
[formControlName]="field.variable"
[contentlet]="contentlet"
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.KEY_VALUE) {
<dot-edit-content-key-value
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-key-value
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.WYSIWYG) {
<dot-edit-content-wysiwyg-field
[field]="field"
[contentlet]="contentlet"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-wysiwyg-field
[field]="field"
[contentlet]="contentlet"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.HOST_FOLDER) {
<dot-edit-content-host-folder-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
@defer (on immediate) {
<dot-edit-content-host-folder-field
[field]="field"
[attr.data-testId]="'field-' + field.variable" />
}
}
@case (fieldTypes.CATEGORY) {
<dot-edit-content-category-field
[attr.data-testId]="'field-' + field.variable"
[contentlet]="contentlet"
[field]="field" />
@defer (on immediate) {
<dot-edit-content-category-field
[attr.data-testId]="'field-' + field.variable"
[contentlet]="contentlet"
[field]="field" />
}
}
@case (fieldTypes.FILE) {
<dot-edit-content-file-field
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable"
[field]="field" />
@defer (on immediate) {
<dot-edit-content-file-field
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable"
[field]="field" />
}
}
@case (fieldTypes.IMAGE) {
<dot-edit-content-file-field
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable"
[field]="field" />
@defer (on immediate) {
<dot-edit-content-file-field
[formControlName]="field.variable"
[attr.data-testId]="'field-' + field.variable"
[field]="field" />
}
}
}
@if (field.hint) {
Expand Down
28 changes: 26 additions & 2 deletions ...dit-content/src/lib/components/dot-edit-content-field/dot-edit-content-field.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down
53 changes: 0 additions & 53 deletions core-web/libs/edit-content/src/lib/fields/dot-edit-content-fields.module.ts
View file

This file was deleted.

2 changes: 1 addition & 1 deletion core-web/libs/edit-content/src/lib/pipes/truncate-path.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator';
import { createPipeFactory, SpectatorPipe } from '@ngneat/spectator/jest';

import { TruncatePathPipe } from './truncate-path.pipe';

Expand Down

0 comments on commit 017c6b8

Please sign in to comment.