Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve load time in edit-content form #30389

Closed
nicobytes opened this issue Oct 18, 2024 · 3 comments · Fixed by #30392
Closed

Improve load time in edit-content form #30389

nicobytes opened this issue Oct 18, 2024 · 3 comments · Fixed by #30392
Assignees
@oidacra
Labels
dotCMS : Content Management Gardening Day OKR : Application Performance Owned by Will QA : Passed Internal Team : Falcon Type : Enhancement

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Oct 18, 2024 •
edited
Loading

Task

Optimize load time by using the @defer in fields, allowing non-critical content to load asynchronously and improve overall performance

Proposed Objective

Application Performance

Proposed Priority

Priority 4 - Trivial

Acceptance Criteria

  1. Create a new content type.
  2. Utilize all available fields in this content type.
  3. Ensure that all fields load correctly in both the new and old versions of the content editor.

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

time (ms) vs Lazy Load

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response
@nicobytes nicobytes self-assigned this Oct 18, 2024
nicobytes added a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): remove module with all fields #30389
6b900b2
nicobytes added a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): delete file #30389
5ffa17c
@nicobytes nicobytes mentioned this issue Oct 18, 2024
Merged
3 tasks
@nicobytes nicobytes linked a pull request Oct 18, 2024 that will close this issue
chore(edit-content): improve load time in edit content form #30392
Merged
3 tasks
@github-actions GitHub Actions
Copy link

PRs:

nicobytes added a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): fix unit tests #30389
3a4b392
@nicobytes
Copy link
Contributor Author

QA Notes:

Case 1: All fields

  1. Create a new content type.
  2. Utilize all available fields in this content type.
  3. Ensure that all fields load correctly in both the new and old versions of the content editor.
2024-10-18.13-04-26.mp4

Case 2: One field

  1. Create a new content type.
  2. Utilize just one available fields in this content type.
  3. Ensure that the field load correctly in both the new and old versions of the content editor.
2024-10-18.13-05-19.mp4

github-merge-queue bot pushed a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): improve load time in edit content form (#30392)
017c6b8 
### 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)
nicobytes added a commit that referenced this issue Oct 18, 2024
@nicobytes
chore(edit-content): use signal #30389
9bd4653
@dsilvam dsilvam assigned dsilvam and unassigned nicobytes and dsilvam Oct 18, 2024
@oidacra oidacra self-assigned this Oct 18, 2024
@oidacra
Copy link
Member

oidacra commented Oct 18, 2024

IQA Passed.
All the fields are now loaded in as deferred way.

CleanShot.2024-10-18.at.16.37.57.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@oidacra oidacra

Labels
dotCMS : Content Management Gardening Day OKR : Application Performance Owned by Will QA : Passed Internal Team : Falcon Type : Enhancement
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore(edit-content): improve load time in edit content form dotCMS/core
3 participants
@dsilvam @oidacra @nicobytes