Skip to content

Commit 3277258

Browse files
AwakichAwakich
committed
perf: add @defer blocks for lazy-loading modals and step components
1 parent 12b9140 commit 3277258

6 files changed

Lines changed: 93 additions & 25 deletions

File tree

‎projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,24 +60,34 @@ <h1 class="profile__title">редактирование профиля</h1>
6060

6161
<div class="profile__wrapper">
6262
@if(editingStep() === 'main'){
63+
@defer {
6364
<app-profile-main-step
6465
(openSpecsGroupsModal)="openSpecializationGroup()"
6566
></app-profile-main-step>
67+
}
6668
} @if (editingStep() === 'education') {
69+
@defer {
6770
<app-profile-education-step
6871
[isEducationDirty]="isEducationDirty"
6972
></app-profile-education-step>
73+
}
7074
} @if (editingStep() === 'experience') {
75+
@defer {
7176
<app-profile-experience-step [isWorkDirty]="isWorkDirty"></app-profile-experience-step>
77+
}
7278
} @if(editingStep() === 'achievements'){
79+
@defer {
7380
<app-profile-achievements-step
7481
[isAchievementsDirty]="isAchievementsDirty"
7582
></app-profile-achievements-step>
83+
}
7684
} @if (editingStep() === 'skills') {
85+
@defer {
7786
<app-profile-skills-step
7887
[isLanguageDirty]="isLanguageDirty"
7988
(openSkillsGroupsModal)="toggleSkillsGroupsModal()"
8089
></app-profile-skills-step>
90+
}
8191
} @else if (editingStep() === 'settings') {
8292
<div class="profile__wrapper--settings">
8393
<app-button
@@ -137,6 +147,7 @@ <h1 class="profile__title">редактирование профиля</h1>
137147
</div>
138148
</app-modal>
139149

150+
@defer (when specsGroupsModalOpen()) {
140151
<app-modal
141152
[open]="specsGroupsModalOpen()"
142153
(openChange)="specsGroupsModalOpen.set(!specsGroupsModalOpen())"
@@ -170,7 +181,9 @@ <h4 class="text-heading-4">более специальностей</h4>
170181
>
171182
</div>
172183
</app-modal>
184+
}
173185

186+
@defer (when skillsGroupsModalOpen()) {
174187
<app-modal [open]="skillsGroupsModalOpen()" class="modal">
175188
<div class="modal__wrapper">
176189
<h4 class="text-heading-4">библиотека навыков</h4>
@@ -201,3 +214,4 @@ <h4 class="text-heading-4">библиотека навыков</h4>
201214
>
202215
</div>
203216
</app-modal>
217+
}

‎projects/social_platform/src/app/ui/pages/program/detail/list/list.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@
191191
</div>
192192
</div>
193193

194+
@defer (when isHintExpertsModal()) {
194195
<app-modal [open]="isHintExpertsModal()" (openChange)="isHintExpertsModal.set(false)">
195196
<div class="cancel">
196197
<div class="cancel__top">
@@ -231,6 +232,7 @@
231232
</app-modal>
232233
}
233234

235+
@defer (when isFilterOpen()) {
234236
<app-modal
235237
[open]="isFilterOpen()"
236238
(openChange)="isFilterOpen.set($event)"
@@ -249,4 +251,6 @@
249251
применить фильтр
250252
</app-button>
251253
</app-modal>
254+
}
255+
}
252256
</div>

‎projects/social_platform/src/app/ui/pages/projects/edit/edit.component.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,29 +46,41 @@ <h1 class="project__title">редактировать проект</h1>
4646

4747
<div class="project__inner">
4848
@if (editingStep() === "main") {
49+
@defer {
4950
<app-project-main-step
5051
style="width: 100%"
5152
[projSubmitInitiated]="projSubmitInitiated()"
5253
></app-project-main-step>
54+
}
5355
} @else if (editingStep() === "contacts") {
56+
@defer {
5457
<app-project-partner-resources-step
5558
style="width: 100%"
5659
></app-project-partner-resources-step>
60+
}
5761
} @else if (editingStep() === "achievements") {
62+
@defer {
5863
<app-project-achievement-step
5964
style="width: 100%"
6065
[projSubmitInitiated]="projSubmitInitiated()"
6166
></app-project-achievement-step>
67+
}
6268
} @else if (editingStep() === "vacancies"){
69+
@defer {
6370
<app-project-vacancy-step style="width: 100%"></app-project-vacancy-step>
71+
}
6472
} @else if (editingStep() === "team") {
73+
@defer {
6574
<app-project-team-step style="width: 100%"></app-project-team-step>
75+
}
6676
} @else if (editingStep() === "additional") {
77+
@defer {
6778
<app-project-additional-step
6879
#additionalStepComponent
6980
style="width: 100%"
7081
></app-project-additional-step>
7182
}
83+
}
7284
</div>
7385
</form>
7486
<app-modal
@@ -104,6 +116,7 @@ <h3 class="text-bold-body-16">📢 внимание!</h3>
104116
</main>
105117
</div>
106118

119+
@defer (when isCompleted()) {
107120
<app-modal [open]="isCompleted()" (openChange)="isCompleted.set(!isCompleted())">
108121
<div class="cancel">
109122
<div class="cancel__top">
@@ -125,7 +138,9 @@ <h3 class="text-bold-body-16">📢 внимание!</h3>
125138
</p>
126139
</div>
127140
</app-modal>
141+
}
128142

143+
@defer (when isSendDescisionLate()) {
129144
<app-modal
130145
[open]="isSendDescisionLate()"
131146
(openChange)="isSendDescisionLate.set(!isSendDescisionLate())"
@@ -139,7 +154,9 @@ <h3 class="text-bold-body-16">📢 внимание!</h3>
139154
<p class="text-body-12">Срок подачи проектов в программу завершён</p>
140155
</div>
141156
</app-modal>
157+
}
142158

159+
@defer (when fromProgramOpen()) {
143160
<app-modal [open]="fromProgramOpen()" (openChange)="fromProgramOpen.set(false)">
144161
<div class="cancel" style="width: 605px; padding: 0px 24px">
145162
<div class="cancel__top">
@@ -178,7 +195,9 @@ <h3 class="text-bold-body-16">📢 внимание!</h3>
178195
>
179196
</div>
180197
</app-modal>
198+
}
181199

200+
@defer (when isSendDescisionToPartnerProgramProject()) {
182201
<app-modal
183202
[open]="isSendDescisionToPartnerProgramProject()"
184203
(openChange)="
@@ -225,3 +244,4 @@ <h4 class="cancel__title text-heading-4">Отправить заявку?</h4>
225244
</div>
226245
</div>
227246
</app-modal>
247+
}

‎projects/social_platform/src/app/ui/pages/vacancies/detail/info/info.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
</div>
2626
</app-modal>
2727

28+
@defer (when openModal()) {
2829
<app-modal [open]="openModal()" (openChange)="closeSendResponseModal()">
2930
<div class="cancel">
3031
<div class="lists__section">
@@ -111,3 +112,4 @@
111112
</div>
112113
</app-modal>
113114
}
115+
}

‎projects/social_platform/src/app/ui/widgets/detail/detail.component.html‎

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@
278278
</app-button>
279279
}
280280

281+
@defer (when isAssignProjectToProgramModalOpen()) {
281282
<app-modal
282283
[open]="isAssignProjectToProgramModalOpen()"
283284
(openChange)="
@@ -298,7 +299,9 @@
298299
<p class="text-body-12 cancel__text">{{ assignProjectToProgramModalMessage() }}.</p>
299300
</div>
300301
</app-modal>
302+
}
301303

304+
@defer (when isProgramEndedModalOpen()) {
302305
<app-modal
303306
[open]="isProgramEndedModalOpen()"
304307
(openChange)="isProgramEndedModalOpen.set(!isProgramEndedModalOpen())"
@@ -311,7 +314,9 @@
311314
<i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
312315
</div>
313316
</app-modal>
317+
}
314318

319+
@defer (when isProgramSubmissionProjectsEndedModalOpen()) {
315320
<app-modal
316321
[open]="isProgramSubmissionProjectsEndedModalOpen()"
317322
(openChange)="
@@ -328,7 +333,9 @@
328333
<i appIcon icon="sad-smile" appSquare="50" style="margin-top: 36px"></i>
329334
</div>
330335
</app-modal>
336+
}
331337

338+
@defer (when isContactsModalOpen()) {
332339
<app-modal
333340
[open]="isContactsModalOpen()"
334341
(openChange)="isContactsModalOpen.set(!isContactsModalOpen())"
@@ -340,7 +347,9 @@
340347
[links]="contactLinks()"
341348
></app-program-links>
342349
</app-modal>
350+
}
343351

352+
@defer (when isMaterialsModalOpen()) {
344353
<app-modal
345354
[open]="isMaterialsModalOpen()"
346355
(openChange)="isMaterialsModalOpen.set(!isMaterialsModalOpen())"
@@ -352,6 +361,7 @@
352361
[links]="materialLinks()"
353362
></app-program-links>
354363
</app-modal>
364+
}
355365
} }
356366
</ng-template>
357367

@@ -437,6 +447,7 @@
437447
</app-button>
438448
} }
439449

450+
@defer (when isEditDisableModal()) {
440451
<app-modal [(open)]="isEditDisableModal">
441452
<div
442453
class="unsubscribe-modal"
@@ -472,7 +483,9 @@ <h4 class="support__title text-body-12">редактирование недос
472483
>
473484
</div>
474485
</app-modal>
486+
}
475487

488+
@defer (when isLeaveProjectModalOpen()) {
476489
<app-modal [(open)]="isLeaveProjectModalOpen">
477490
<div class="cancel" style="padding: 14px 24px">
478491
<div class="cancel__top">
@@ -502,6 +515,7 @@ <h3 class="text-body-14 cancel__title" style="flex-wrap: wrap; width: 90%">
502515
</div>
503516
</div>
504517
</app-modal>
518+
}
505519
} @else {
506520
<app-button
507521
[routerLink]="AppRoutes.projects.vacancies(info().id)"
@@ -591,33 +605,35 @@ <h3 class="text-body-14 cancel__title" style="flex-wrap: wrap; width: 90%">
591605
</a>
592606
}
593607

594-
<app-modal
595-
[open]="showApproveSkillModal()"
596-
(openChange)="showApproveSkillModal.set(!showApproveSkillModal())"
597-
>
598-
@if (info().skills.length) {
599-
<ul class="approve">
600-
<div class="lists__section">
601-
<h3 class="text-body-12 lists__title">подтвердить владение навыком</h3>
602-
<i
603-
appIcon
604-
icon="squiz"
605-
class="lists__icon"
606-
style="margin-top: 1px"
607-
appSquare="12"
608-
></i>
609-
</div>
608+
@defer (when showApproveSkillModal()) {
609+
<app-modal
610+
[open]="showApproveSkillModal()"
611+
(openChange)="showApproveSkillModal.set(!showApproveSkillModal())"
612+
>
613+
@if (info().skills.length) {
614+
<ul class="approve">
615+
<div class="lists__section">
616+
<h3 class="text-body-12 lists__title">подтвердить владение навыком</h3>
617+
<i
618+
appIcon
619+
icon="squiz"
620+
class="lists__icon"
621+
style="margin-top: 1px"
622+
appSquare="12"
623+
></i>
624+
</div>
610625

611-
@for (skill of info().skills; track skill.id) {
612-
<li (click)="onOpenSkill(skill.id)">
613-
<app-approve-skill [skill]="skill"></app-approve-skill>
614-
</li>
626+
@for (skill of info().skills; track skill.id) {
627+
<li (click)="onOpenSkill(skill.id)">
628+
<app-approve-skill [skill]="skill"></app-approve-skill>
629+
</li>
630+
}
631+
</ul>
615632
}
616-
</ul>
617-
}
618-
</app-modal>
633+
</app-modal>
634+
}
619635

620-
@if (!showNoProjectsModal() && showSendInviteModal()) {
636+
@defer (when !showNoProjectsModal() && showSendInviteModal()) {
621637
<app-modal
622638
[open]="showSendInviteModal()"
623639
(openChange)="showSendInviteModal.set(!showSendInviteModal())"
@@ -687,6 +703,7 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
687703
</app-modal>
688704
}
689705

706+
@defer (when showNoProjectsModal()) {
690707
<app-modal
691708
[open]="showNoProjectsModal()"
692709
(openChange)="showNoProjectsModal.set(!showNoProjectsModal())"
@@ -707,7 +724,9 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
707724
>
708725
</div>
709726
</app-modal>
727+
}
710728

729+
@defer (when showActiveInviteModal()) {
711730
<app-modal
712731
[open]="showActiveInviteModal()"
713732
(openChange)="showActiveInviteModal.set(!showActiveInviteModal())"
@@ -730,7 +749,9 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
730749
>
731750
</div>
732751
</app-modal>
752+
}
733753

754+
@defer (when showNoInProgramModal()) {
734755
<app-modal
735756
[open]="showNoInProgramModal()"
736757
(openChange)="showNoInProgramModal.set(!showNoInProgramModal())"
@@ -754,7 +775,9 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
754775
>
755776
</div>
756777
</app-modal>
778+
}
757779

780+
@defer (when showSuccessInviteModal()) {
758781
<app-modal
759782
[open]="showSuccessInviteModal()"
760783
(openChange)="showSuccessInviteModal.set(!showSuccessInviteModal())"
@@ -778,8 +801,10 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
778801
>
779802
</div>
780803
</app-modal>
804+
}
781805

782806
} @if (profile()) { @if (profile()!.id === info().id) {
807+
@defer (when isProfileFill()) {
783808
<app-modal [open]="isProfileFill()" (openChange)="isProfileFill.set(!isProfileFill())">
784809
<div class="cancel">
785810
<img
@@ -810,8 +835,10 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
810835
</a>
811836
</div>
812837
</app-modal>
838+
}
813839
} }
814840

841+
@defer (when isDelayModalOpen()) {
815842
<app-modal
816843
[open]="isDelayModalOpen()"
817844
(openChange)="isDelayModalOpen.set(!isDelayModalOpen())"
@@ -832,6 +859,7 @@ <h3 class="text-body-12 lists__title">выберите проект и роль
832859
</p>
833860
</div>
834861
</app-modal>
862+
}
835863
</ng-template>
836864

837865
<router-outlet></router-outlet>

‎projects/social_platform/src/app/ui/widgets/news-card/news-card.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<app-textarea size="big" [formControl]="text | formControl"></app-textarea>
4343
} }
4444
</div>
45-
} @if (editMode) {
45+
} @defer (when editMode) {
4646
<ul>
4747
@for (f of imagesEditList; track f.id) {
4848
<app-img-card

0 commit comments

Comments
 (0)