WISE-Community · hirokiterashima · Nov 17, 2025 · Nov 13, 2025
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -93,7 +93,11 @@
         >
           Curriculum Offerings
         </h1>
-        <app-home-page-project-library></app-home-page-project-library>
+        @defer (on viewport) {
+          <app-home-page-project-library />
+        } @placeholder {
+          <div i18n>Curriculum Offerings</div>
+        }
         <div class="library__links">
           <h2
             class="accent-1 flex flex-wrap flex-col sm:flex-row gap-4 place-items-center justify-center"
@@ -152,8 +156,7 @@
             destination="https://wise-discuss.berkeley.edu"
             linkTarget="_self"
             [isOutsideLink]="true"
-          >
-          </app-call-to-action>
+          />
           <app-call-to-action
             icon="live_help"
             iconColor="accent-2"
@@ -162,8 +165,7 @@
             i18n-content
             content="View tutorials and common questions."
             destination="/help"
-          >
-          </app-call-to-action>
+          />
           <app-call-to-action
             icon="contact_mail"
             iconColor="accent"

diff --git a/...app/modules/library/home-page-project-library/home-page-project-library.component.spec.ts b/...app/modules/library/home-page-project-library/home-page-project-library.component.spec.ts
@@ -1,7 +1,10 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HomePageProjectLibraryComponent } from './home-page-project-library.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { LibraryService } from '../../../services/library.service';
+import { MockComponents } from 'ng-mocks';
+import { LibraryFiltersComponent } from '../library-filters/library-filters.component';
+import { provideRouter } from '@angular/router';
+import { OfficialLibraryComponent } from '../official-library/official-library.component';
 
 export class MockLibraryService {
   getOfficialLibraryProjects() {}
@@ -13,10 +16,11 @@ describe('HomePageProjectLibraryComponent', () => {
   let fixture: ComponentFixture<HomePageProjectLibraryComponent>;
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [],
-      declarations: [HomePageProjectLibraryComponent],
-      providers: [{ provide: LibraryService, useClass: MockLibraryService }],
-      schemas: [NO_ERRORS_SCHEMA]
+      imports: [
+        HomePageProjectLibraryComponent,
+        MockComponents(OfficialLibraryComponent, LibraryFiltersComponent)
+      ],
+      providers: [{ provide: LibraryService, useClass: MockLibraryService }, provideRouter([])]
     }).compileComponents();
   }));
 

diff --git a/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts b/src/app/modules/library/home-page-project-library/home-page-project-library.component.ts
@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
 import { LibraryService } from '../../../services/library.service';
 import { ProjectFilterValues } from '../../../domain/projectFilterValues';
+import { LibraryFiltersComponent } from '../library-filters/library-filters.component';
+import { RouterLink } from '@angular/router';
+import { OfficialLibraryComponent } from '../official-library/official-library.component';
 
 @Component({
+  imports: [LibraryFiltersComponent, RouterLink, OfficialLibraryComponent],
   providers: [ProjectFilterValues],
   selector: 'app-home-page-project-library',
-  standalone: false,
   styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
   templateUrl: './home-page-project-library.component.html'
 })

diff --git a/src/app/modules/library/library-project-details/library-project-details.component.spec.ts b/src/app/modules/library/library-project-details/library-project-details.component.spec.ts
@@ -35,8 +35,7 @@ describe('LibraryProjectDetailsComponent', () => {
       resources: [{ name: 'Resource 1', uri: 'http://example.com/resource1' }]
     };
     TestBed.configureTestingModule({
-      declarations: [MockComponent(LibraryProjectMenuComponent)],
-      imports: [LibraryProjectDetailsComponent],
+      imports: [LibraryProjectDetailsComponent, MockComponent(LibraryProjectMenuComponent)],
       providers: [
         MockProviders(ConfigService, MatDialog, MatDialogRef, UserService),
         { provide: MAT_DIALOG_DATA, useValue: { project: project } }

diff --git a/src/app/modules/library/library.module.ts b/src/app/modules/library/library.module.ts
@@ -85,9 +85,10 @@ const materialModules = [
     SelectMenuComponent,
     SelectTagsComponent,
     SharedModule,
-    UnitTagsComponent
+    UnitTagsComponent,
+    HomePageProjectLibraryComponent,
+    ShareProjectDialogComponent
   ],
-  declarations: [HomePageProjectLibraryComponent, ShareProjectDialogComponent],
   exports: [
     CurriculumComponent,
     HomePageProjectLibraryComponent,

diff --git a/src/app/modules/library/share-project-dialog/share-project-dialog.component.spec.ts b/src/app/modules/library/share-project-dialog/share-project-dialog.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ShareProjectDialogComponent } from './share-project-dialog.component';
 import { TeacherService } from '../../../teacher/teacher.service';
 import { Observable } from 'rxjs';
@@ -52,8 +51,12 @@ describe('ShareProjectDialogComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ShareProjectDialogComponent],
-      imports: [BrowserAnimationsModule, MatAutocompleteModule, MatSnackBarModule, MatTableModule],
+      imports: [
+        MatAutocompleteModule,
+        MatSnackBarModule,
+        MatTableModule,
+        ShareProjectDialogComponent
+      ],
       providers: [
         { provide: TeacherService, useClass: MockTeacherService },
         { provide: LibraryService, useClass: MockLibraryService },

diff --git a/src/app/modules/library/share-project-dialog/share-project-dialog.component.ts b/src/app/modules/library/share-project-dialog/share-project-dialog.component.ts
@@ -1,17 +1,88 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose
+} from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatTableDataSource } from '@angular/material/table';
+import {
+  MatTableDataSource,
+  MatTable,
+  MatColumnDef,
+  MatHeaderCellDef,
+  MatHeaderCell,
+  MatCellDef,
+  MatCell,
+  MatHeaderRowDef,
+  MatHeaderRow,
+  MatRowDef,
+  MatRow
+} from '@angular/material/table';
 import { TeacherService } from '../../../teacher/teacher.service';
 import { LibraryService } from '../../../services/library.service';
 import { ShareItemDialogComponent } from '../share-item-dialog/share-item-dialog.component';
 import { Project } from '../../../domain/project';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { MatDivider } from '@angular/material/divider';
+import {
+  MatFormField,
+  MatLabel,
+  MatPrefix,
+  MatSuffix,
+  MatHint
+} from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
+import { MatIconButton, MatButton } from '@angular/material/button';
+import { NgClass, AsyncPipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
   selector: 'app-share-project-dialog',
-  standalone: false,
   styleUrl: './share-project-dialog.component.scss',
-  templateUrl: './share-project-dialog.component.html'
+  templateUrl: './share-project-dialog.component.html',
+  imports: [
+    MatDialogTitle,
+    CdkScrollable,
+    MatDialogContent,
+    MatDivider,
+    MatFormField,
+    MatLabel,
+    MatIcon,
+    MatPrefix,
+    MatInput,
+    FormsModule,
+    MatAutocompleteTrigger,
+    ReactiveFormsModule,
+    MatIconButton,
+    MatSuffix,
+    NgClass,
+    MatHint,
+    MatAutocomplete,
+    MatOption,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCellDef,
+    MatHeaderCell,
+    MatCellDef,
+    MatCell,
+    RouterLink,
+    MatCheckbox,
+    MatHeaderRowDef,
+    MatHeaderRow,
+    MatRowDef,
+    MatRow,
+    MatDialogActions,
+    MatButton,
+    MatDialogClose,
+    AsyncPipe
+  ]
 })
 export class ShareProjectDialogComponent extends ShareItemDialogComponent {
   dataSource: MatTableDataSource<any[]> = new MatTableDataSource<any[]>();

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -5159,35 +5159,42 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source> Curriculum Offerings </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">94,96</context>
+          <context context-type="linenumber">94,97</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="7303979114499756666" datatype="html">
+        <source>Curriculum Offerings</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/home/home.component.html</context>
+          <context context-type="linenumber">99,103</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8254507243031097369" datatype="html">
         <source>Ready to try WISE in the Classroom?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">101,102</context>
+          <context context-type="linenumber">105,106</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8559814757060095671" datatype="html">
         <source>Sign up for free!</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">102,108</context>
+          <context context-type="linenumber">106,112</context>
         </context-group>
       </trans-unit>
       <trans-unit id="813263746069473514" datatype="html">
         <source>Connect</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">115,118</context>
+          <context context-type="linenumber">119,122</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1879845826079889803" datatype="html">
         <source>WISE on Facebook</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">121,124</context>
+          <context context-type="linenumber">125,128</context>
         </context-group>
         <context-group purpose="location">
           <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
         <source>WISE on Twitter</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">130,133</context>
+          <context context-type="linenumber">134,137</context>
         </context-group>
         <context-group purpose="location">
           <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
         <source>WISE on Github</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">139,142</context>
+          <context context-type="linenumber">143,146</context>
         </context-group>
         <context-group purpose="location">
           <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
         <source>Community</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">149,151</context>
+          <context context-type="linenumber">153,155</context>
         </context-group>
         <context-group purpose="location">
           <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
         <source>Join us! Discuss all things WISE.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">151,153</context>
+          <context context-type="linenumber">155,157</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2957506008467670172" datatype="html">
         <source>Help + FAQs</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">161,163</context>
+          <context context-type="linenumber">164,166</context>
         </context-group>
         <context-group purpose="location">
           <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
         <source>View tutorials and common questions.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">163,166</context>
+          <context context-type="linenumber">166,169</context>
         </context-group>
       </trans-unit>
       <trans-unit id="759687838251957893" datatype="html">
         <source>Contact Us</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">171,173</context>
+          <context context-type="linenumber">173,175</context>
         </context-group>
         <context-group purpose="location">
           <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
         <source>Want to get in touch? Send us a message.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/home/home.component.html</context>
-          <context context-type="linenumber">173,177</context>
+          <context context-type="linenumber">175,179</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3220280128711469703" datatype="html">