Skip to content

Commit 5dd3b77

Browse files
hirokiterashimahirokiterashima
authored
perf(HomeComponent): Defer loading library until on viewport
1 parent e8a8c2e commit 5dd3b77

File tree

8 files changed

+125
-35
lines changed

8 files changed

+125
-35
lines changed

‎src/app/home/home.component.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,11 @@
9393
>
9494
Curriculum Offerings
9595
</h1>
96-
<app-home-page-project-library></app-home-page-project-library>
96+
@defer (on viewport) {
97+
<app-home-page-project-library />
98+
} @placeholder {
99+
<div i18n>Curriculum Offerings</div>
100+
}
97101
<div class="library__links">
98102
<h2
99103
class="accent-1 flex flex-wrap flex-col sm:flex-row gap-4 place-items-center justify-center"
@@ -152,8 +156,7 @@
152156
destination="https://wise-discuss.berkeley.edu"
153157
linkTarget="_self"
154158
[isOutsideLink]="true"
155-
>
156-
</app-call-to-action>
159+
/>
157160
<app-call-to-action
158161
icon="live_help"
159162
iconColor="accent-2"
@@ -162,8 +165,7 @@
162165
i18n-content
163166
content="View tutorials and common questions."
164167
destination="/help"
165-
>
166-
</app-call-to-action>
168+
/>
167169
<app-call-to-action
168170
icon="contact_mail"
169171
iconColor="accent"

‎src/app/modules/library/home-page-project-library/home-page-project-library.component.spec.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
22
import { HomePageProjectLibraryComponent } from './home-page-project-library.component';
3-
import { NO_ERRORS_SCHEMA } from '@angular/core';
43
import { LibraryService } from '../../../services/library.service';
4+
import { MockComponents } from 'ng-mocks';
5+
import { LibraryFiltersComponent } from '../library-filters/library-filters.component';
6+
import { provideRouter } from '@angular/router';
7+
import { OfficialLibraryComponent } from '../official-library/official-library.component';
58

69
export class MockLibraryService {
710
getOfficialLibraryProjects() {}
@@ -13,10 +16,11 @@ describe('HomePageProjectLibraryComponent', () => {
1316
let fixture: ComponentFixture<HomePageProjectLibraryComponent>;
1417
beforeEach(waitForAsync(() => {
1518
TestBed.configureTestingModule({
16-
imports: [],
17-
declarations: [HomePageProjectLibraryComponent],
18-
providers: [{ provide: LibraryService, useClass: MockLibraryService }],
19-
schemas: [NO_ERRORS_SCHEMA]
19+
imports: [
20+
HomePageProjectLibraryComponent,
21+
MockComponents(OfficialLibraryComponent, LibraryFiltersComponent)
22+
],
23+
providers: [{ provide: LibraryService, useClass: MockLibraryService }, provideRouter([])]
2024
}).compileComponents();
2125
}));
2226

‎src/app/modules/library/home-page-project-library/home-page-project-library.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { Component } from '@angular/core';
22
import { LibraryService } from '../../../services/library.service';
33
import { ProjectFilterValues } from '../../../domain/projectFilterValues';
4+
import { LibraryFiltersComponent } from '../library-filters/library-filters.component';
5+
import { RouterLink } from '@angular/router';
6+
import { OfficialLibraryComponent } from '../official-library/official-library.component';
47

58
@Component({
9+
imports: [LibraryFiltersComponent, RouterLink, OfficialLibraryComponent],
610
providers: [ProjectFilterValues],
711
selector: 'app-home-page-project-library',
8-
standalone: false,
912
styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
1013
templateUrl: './home-page-project-library.component.html'
1114
})

‎src/app/modules/library/library-project-details/library-project-details.component.spec.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,7 @@ describe('LibraryProjectDetailsComponent', () => {
3535
resources: [{ name: 'Resource 1', uri: 'http://example.com/resource1' }]
3636
};
3737
TestBed.configureTestingModule({
38-
declarations: [MockComponent(LibraryProjectMenuComponent)],
39-
imports: [LibraryProjectDetailsComponent],
38+
imports: [LibraryProjectDetailsComponent, MockComponent(LibraryProjectMenuComponent)],
4039
providers: [
4140
MockProviders(ConfigService, MatDialog, MatDialogRef, UserService),
4241
{ provide: MAT_DIALOG_DATA, useValue: { project: project } }

‎src/app/modules/library/library.module.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,10 @@ const materialModules = [
8585
SelectMenuComponent,
8686
SelectTagsComponent,
8787
SharedModule,
88-
UnitTagsComponent
88+
UnitTagsComponent,
89+
HomePageProjectLibraryComponent,
90+
ShareProjectDialogComponent
8991
],
90-
declarations: [HomePageProjectLibraryComponent, ShareProjectDialogComponent],
9192
exports: [
9293
CurriculumComponent,
9394
HomePageProjectLibraryComponent,

‎src/app/modules/library/share-project-dialog/share-project-dialog.component.spec.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
32
import { ShareProjectDialogComponent } from './share-project-dialog.component';
43
import { TeacherService } from '../../../teacher/teacher.service';
54
import { Observable } from 'rxjs';
@@ -52,8 +51,12 @@ describe('ShareProjectDialogComponent', () => {
5251

5352
beforeEach(waitForAsync(() => {
5453
TestBed.configureTestingModule({
55-
declarations: [ShareProjectDialogComponent],
56-
imports: [BrowserAnimationsModule, MatAutocompleteModule, MatSnackBarModule, MatTableModule],
54+
imports: [
55+
MatAutocompleteModule,
56+
MatSnackBarModule,
57+
MatTableModule,
58+
ShareProjectDialogComponent
59+
],
5760
providers: [
5861
{ provide: TeacherService, useClass: MockTeacherService },
5962
{ provide: LibraryService, useClass: MockLibraryService },

‎src/app/modules/library/share-project-dialog/share-project-dialog.component.ts‎

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,88 @@
11
import { Component, Inject } from '@angular/core';
2-
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
2+
import {
3+
MAT_DIALOG_DATA,
4+
MatDialogRef,
5+
MatDialogTitle,
6+
MatDialogContent,
7+
MatDialogActions,
8+
MatDialogClose
9+
} from '@angular/material/dialog';
310
import { MatSnackBar } from '@angular/material/snack-bar';
4-
import { MatTableDataSource } from '@angular/material/table';
11+
import {
12+
MatTableDataSource,
13+
MatTable,
14+
MatColumnDef,
15+
MatHeaderCellDef,
16+
MatHeaderCell,
17+
MatCellDef,
18+
MatCell,
19+
MatHeaderRowDef,
20+
MatHeaderRow,
21+
MatRowDef,
22+
MatRow
23+
} from '@angular/material/table';
524
import { TeacherService } from '../../../teacher/teacher.service';
625
import { LibraryService } from '../../../services/library.service';
726
import { ShareItemDialogComponent } from '../share-item-dialog/share-item-dialog.component';
827
import { Project } from '../../../domain/project';
28+
import { CdkScrollable } from '@angular/cdk/scrolling';
29+
import { MatDivider } from '@angular/material/divider';
30+
import {
31+
MatFormField,
32+
MatLabel,
33+
MatPrefix,
34+
MatSuffix,
35+
MatHint
36+
} from '@angular/material/form-field';
37+
import { MatIcon } from '@angular/material/icon';
38+
import { MatInput } from '@angular/material/input';
39+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
40+
import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
41+
import { MatIconButton, MatButton } from '@angular/material/button';
42+
import { NgClass, AsyncPipe } from '@angular/common';
43+
import { RouterLink } from '@angular/router';
44+
import { MatCheckbox } from '@angular/material/checkbox';
945

1046
@Component({
1147
selector: 'app-share-project-dialog',
12-
standalone: false,
1348
styleUrl: './share-project-dialog.component.scss',
14-
templateUrl: './share-project-dialog.component.html'
49+
templateUrl: './share-project-dialog.component.html',
50+
imports: [
51+
MatDialogTitle,
52+
CdkScrollable,
53+
MatDialogContent,
54+
MatDivider,
55+
MatFormField,
56+
MatLabel,
57+
MatIcon,
58+
MatPrefix,
59+
MatInput,
60+
FormsModule,
61+
MatAutocompleteTrigger,
62+
ReactiveFormsModule,
63+
MatIconButton,
64+
MatSuffix,
65+
NgClass,
66+
MatHint,
67+
MatAutocomplete,
68+
MatOption,
69+
MatTable,
70+
MatColumnDef,
71+
MatHeaderCellDef,
72+
MatHeaderCell,
73+
MatCellDef,
74+
MatCell,
75+
RouterLink,
76+
MatCheckbox,
77+
MatHeaderRowDef,
78+
MatHeaderRow,
79+
MatRowDef,
80+
MatRow,
81+
MatDialogActions,
82+
MatButton,
83+
MatDialogClose,
84+
AsyncPipe
85+
]
1586
})
1687
export class ShareProjectDialogComponent extends ShareItemDialogComponent {
1788
dataSource: MatTableDataSource<any[]> = new MatTableDataSource<any[]>();

‎src/messages.xlf‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5159,35 +5159,42 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
51595159
<source> Curriculum Offerings </source>
51605160
<context-group purpose="location">
51615161
<context context-type="sourcefile">src/app/home/home.component.html</context>
5162-
<context context-type="linenumber">94,96</context>
5162+
<context context-type="linenumber">94,97</context>
5163+
</context-group>
5164+
</trans-unit>
5165+
<trans-unit id="7303979114499756666" datatype="html">
5166+
<source>Curriculum Offerings</source>
5167+
<context-group purpose="location">
5168+
<context context-type="sourcefile">src/app/home/home.component.html</context>
5169+
<context context-type="linenumber">99,103</context>
51635170
</context-group>
51645171
</trans-unit>
51655172
<trans-unit id="8254507243031097369" datatype="html">
51665173
<source>Ready to try WISE in the Classroom?</source>
51675174
<context-group purpose="location">
51685175
<context context-type="sourcefile">src/app/home/home.component.html</context>
5169-
<context context-type="linenumber">101,102</context>
5176+
<context context-type="linenumber">105,106</context>
51705177
</context-group>
51715178
</trans-unit>
51725179
<trans-unit id="8559814757060095671" datatype="html">
51735180
<source>Sign up for free!</source>
51745181
<context-group purpose="location">
51755182
<context context-type="sourcefile">src/app/home/home.component.html</context>
5176-
<context context-type="linenumber">102,108</context>
5183+
<context context-type="linenumber">106,112</context>
51775184
</context-group>
51785185
</trans-unit>
51795186
<trans-unit id="813263746069473514" datatype="html">
51805187
<source>Connect</source>
51815188
<context-group purpose="location">
51825189
<context context-type="sourcefile">src/app/home/home.component.html</context>
5183-
<context context-type="linenumber">115,118</context>
5190+
<context context-type="linenumber">119,122</context>
51845191
</context-group>
51855192
</trans-unit>
51865193
<trans-unit id="1879845826079889803" datatype="html">
51875194
<source>WISE on Facebook</source>
51885195
<context-group purpose="location">
51895196
<context context-type="sourcefile">src/app/home/home.component.html</context>
5190-
<context context-type="linenumber">121,124</context>
5197+
<context context-type="linenumber">125,128</context>
51915198
</context-group>
51925199
<context-group purpose="location">
51935200
<context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -5198,7 +5205,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
51985205
<source>WISE on Twitter</source>
51995206
<context-group purpose="location">
52005207
<context context-type="sourcefile">src/app/home/home.component.html</context>
5201-
<context context-type="linenumber">130,133</context>
5208+
<context context-type="linenumber">134,137</context>
52025209
</context-group>
52035210
<context-group purpose="location">
52045211
<context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -5209,7 +5216,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
52095216
<source>WISE on Github</source>
52105217
<context-group purpose="location">
52115218
<context context-type="sourcefile">src/app/home/home.component.html</context>
5212-
<context context-type="linenumber">139,142</context>
5219+
<context context-type="linenumber">143,146</context>
52135220
</context-group>
52145221
<context-group purpose="location">
52155222
<context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -5220,7 +5227,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
52205227
<source>Community</source>
52215228
<context-group purpose="location">
52225229
<context context-type="sourcefile">src/app/home/home.component.html</context>
5223-
<context context-type="linenumber">149,151</context>
5230+
<context context-type="linenumber">153,155</context>
52245231
</context-group>
52255232
<context-group purpose="location">
52265233
<context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -5239,14 +5246,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
52395246
<source>Join us! Discuss all things WISE.</source>
52405247
<context-group purpose="location">
52415248
<context context-type="sourcefile">src/app/home/home.component.html</context>
5242-
<context context-type="linenumber">151,153</context>
5249+
<context context-type="linenumber">155,157</context>
52435250
</context-group>
52445251
</trans-unit>
52455252
<trans-unit id="2957506008467670172" datatype="html">
52465253
<source>Help + FAQs</source>
52475254
<context-group purpose="location">
52485255
<context context-type="sourcefile">src/app/home/home.component.html</context>
5249-
<context context-type="linenumber">161,163</context>
5256+
<context context-type="linenumber">164,166</context>
52505257
</context-group>
52515258
<context-group purpose="location">
52525259
<context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -5257,14 +5264,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
52575264
<source>View tutorials and common questions.</source>
52585265
<context-group purpose="location">
52595266
<context context-type="sourcefile">src/app/home/home.component.html</context>
5260-
<context context-type="linenumber">163,166</context>
5267+
<context context-type="linenumber">166,169</context>
52615268
</context-group>
52625269
</trans-unit>
52635270
<trans-unit id="759687838251957893" datatype="html">
52645271
<source>Contact Us</source>
52655272
<context-group purpose="location">
52665273
<context context-type="sourcefile">src/app/home/home.component.html</context>
5267-
<context context-type="linenumber">171,173</context>
5274+
<context context-type="linenumber">173,175</context>
52685275
</context-group>
52695276
<context-group purpose="location">
52705277
<context context-type="sourcefile">src/app/modules/footer/footer.component.html</context>
@@ -5275,7 +5282,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
52755282
<source>Want to get in touch? Send us a message.</source>
52765283
<context-group purpose="location">
52775284
<context context-type="sourcefile">src/app/home/home.component.html</context>
5278-
<context context-type="linenumber">173,177</context>
5285+
<context context-type="linenumber">175,179</context>
52795286
</context-group>
52805287
</trans-unit>
52815288
<trans-unit id="3220280128711469703" datatype="html">

0 commit comments

Comments
 (0)