Initialize abuse-category-selector lazily
What does this MR do and why?
Fixes Address performance degradation of Total Blocki... (#331172 - closed).
The abuse-category-selector component causes layout thrashing. With the new change it no longer does that.
This MR also changes abuse-category-selector component initialisation from eager to a lazy one in the note_actions and header_actions components. This is done because the component itself doesn't show anything unless the showDrawer prop is passed, so we're saving resources by doing that.
Screenshots or screen recordings
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
Merge requests
- Apply this patch:
mr.patch
Index: app/assets/javascripts/notes/components/noteable_note.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
--- a/app/assets/javascripts/notes/components/noteable_note.vue (revision 58cd4dfd8f1d00c2c47bcbd91421775ca2f924a7)
+++ b/app/assets/javascripts/notes/components/noteable_note.vue (date 1675860349405)
@@ -134,6 +134,7 @@
};
},
canReportAsAbuse() {
+ return true;
return Boolean(this.reportAbusePath) && this.author.id !== this.getUserData.id;
},
noteAnchorId() {- Open any merge request that has comments
- Click on three dots in any comment, you should see this dropdown:
- Click on 'Report abuse to administrator'.
- A drawer should appear.
Issues
- Apply this patch:
issue.patch
Index: app/assets/javascripts/issues/show/components/header_actions.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue
--- a/app/assets/javascripts/issues/show/components/header_actions.vue (revision 58cd4dfd8f1d00c2c47bcbd91421775ca2f924a7)
+++ b/app/assets/javascripts/issues/show/components/header_actions.vue (date 1675861797980)
@@ -149,6 +149,7 @@
return canClose || canReopen;
},
hasDesktopDropdown() {
+ return true;
return (
this.canCreateIssue || this.canPromoteToEpic || !this.isIssueAuthor || this.canReportSpam
);- Open any issue
- Click on the three dots in the issue header. You should see this dropdown:
- Click on 'Report abuse to administrator'.
- A drawer should appear.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Stanislav Lashmanov