[ENG-9633] Optimize registration initial load (#737)

- Ticket: [ENG-9633]

## Purpose

Optimize initial page load time of the registration overview page

## Summary of Changes
1. Removed embeds.
2. Split code into smaller components.
3. Update states.

Author: nsemets

src/app/app.routes.ts

@@ -68,8 +68,8 @@ export const routes: Routes = [
         path: 'my-projects',
         loadComponent: () =>
           import('./features/my-projects/my-projects.component').then((mod) => mod.MyProjectsComponent),
-        providers: [provideStates([BookmarksState, ProjectsState])],
         canActivate: [authGuard],
+        providers: [provideStates([BookmarksState, ProjectsState])],
       },
       {
         path: 'my-registrations',

src/app/core/components/nav-menu/nav-menu.component.spec.ts

@@ -4,8 +4,8 @@ import { NO_ERRORS_SCHEMA, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 
+import { CustomMenuItem } from '@core/models/custom-menu-item.model';
 import { AuthService } from '@core/services/auth.service';
-import { CustomMenuItem } from '@osf/core/models';
 import { ProviderSelectors } from '@osf/core/store/provider/provider.selectors';
 import { UserSelectors } from '@osf/core/store/user/user.selectors';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';

src/app/features/analytics/components/view-duplicates/view-duplicates.component.spec.ts

@@ -8,7 +8,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ProjectOverviewSelectors } from '@osf/features/project/overview/store';
-import { RegistryOverviewSelectors } from '@osf/features/registry/store/registry-overview';
+import { RegistrySelectors } from '@osf/features/registry/store/registry';
 import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
 import { CustomPaginatorComponent } from '@osf/shared/components/custom-paginator/custom-paginator.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
@@ -64,8 +64,8 @@ describe('Component: View Duplicates', () => {
             { selector: DuplicatesSelectors.getDuplicatesTotalCount, value: 0 },
             { selector: ProjectOverviewSelectors.getProject, value: MOCK_PROJECT_OVERVIEW },
             { selector: ProjectOverviewSelectors.isProjectAnonymous, value: false },
-            { selector: RegistryOverviewSelectors.getRegistry, value: undefined },
-            { selector: RegistryOverviewSelectors.isRegistryAnonymous, value: false },
+            { selector: RegistrySelectors.getRegistry, value: undefined },
+            { selector: RegistrySelectors.isRegistryAnonymous, value: false },
           ],
         }),
         MockProvider(CustomDialogService, mockCustomDialogService),

src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts

@@ -25,11 +25,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UserSelectors } from '@core/store/user';
 import { DeleteComponentDialogComponent, ForkDialogComponent } from '@osf/features/project/overview/components';
 import { ClearProjectOverview, GetProjectById, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
-import {
-  ClearRegistryOverview,
-  GetRegistryById,
-  RegistryOverviewSelectors,
-} from '@osf/features/registry/store/registry-overview';
+import { ClearRegistry, GetRegistryById, RegistrySelectors } from '@osf/features/registry/store/registry';
 import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
 import { CustomPaginatorComponent } from '@osf/shared/components/custom-paginator/custom-paginator.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
@@ -72,9 +68,9 @@ export class ViewDuplicatesComponent {
   private router = inject(Router);
   private destroyRef = inject(DestroyRef);
   private project = select(ProjectOverviewSelectors.getProject);
-  private registration = select(RegistryOverviewSelectors.getRegistry);
+  private registration = select(RegistrySelectors.getRegistry);
   private isProjectAnonymous = select(ProjectOverviewSelectors.isProjectAnonymous);
-  private isRegistryAnonymous = select(RegistryOverviewSelectors.isRegistryAnonymous);
+  private isRegistryAnonymous = select(RegistrySelectors.isRegistryAnonymous);
 
   duplicates = select(DuplicatesSelectors.getDuplicates);
   isDuplicatesLoading = select(DuplicatesSelectors.getDuplicatesLoading);
@@ -127,7 +123,7 @@ export class ViewDuplicatesComponent {
     getDuplicates: GetAllDuplicates,
     clearDuplicates: ClearDuplicates,
     clearProject: ClearProjectOverview,
-    clearRegistration: ClearRegistryOverview,
+    clearRegistration: ClearRegistry,
     getComponentsTree: GetResourceWithChildren,
   });
 

src/app/features/analytics/components/view-linked-projects/view-linked-projects.component.spec.ts

@@ -6,7 +6,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
 import { ProjectOverviewSelectors } from '@osf/features/project/overview/store';
-import { RegistryOverviewSelectors } from '@osf/features/registry/store/registry-overview';
+import { RegistrySelectors } from '@osf/features/registry/store/registry';
 import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
 import { CustomPaginatorComponent } from '@osf/shared/components/custom-paginator/custom-paginator.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
@@ -54,7 +54,7 @@ describe('Component: View Duplicates', () => {
             { selector: LinkedProjectsSelectors.getLinkedProjectsLoading, value: false },
             { selector: LinkedProjectsSelectors.getLinkedProjectsTotalCount, value: 0 },
             { selector: ProjectOverviewSelectors.getProject, value: MOCK_PROJECT_OVERVIEW },
-            { selector: RegistryOverviewSelectors.getRegistry, value: undefined },
+            { selector: RegistrySelectors.getRegistry, value: undefined },
           ],
         }),
         MockProvider(ActivatedRoute, activatedRouteMock),

src/app/features/analytics/components/view-linked-projects/view-linked-projects.component.ts

@@ -22,11 +22,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 
 import { ClearProjectOverview, GetProjectById, ProjectOverviewSelectors } from '@osf/features/project/overview/store';
-import {
-  ClearRegistryOverview,
-  GetRegistryById,
-  RegistryOverviewSelectors,
-} from '@osf/features/registry/store/registry-overview';
+import { ClearRegistry, GetRegistryById, RegistrySelectors } from '@osf/features/registry/store/registry';
 import { ContributorsListComponent } from '@osf/shared/components/contributors-list/contributors-list.component';
 import { CustomPaginatorComponent } from '@osf/shared/components/custom-paginator/custom-paginator.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
@@ -59,7 +55,7 @@ export class ViewLinkedProjectsComponent {
   private route = inject(ActivatedRoute);
   private destroyRef = inject(DestroyRef);
   private project = select(ProjectOverviewSelectors.getProject);
-  private registration = select(RegistryOverviewSelectors.getRegistry);
+  private registration = select(RegistrySelectors.getRegistry);
 
   linkedProjects = select(LinkedProjectsSelectors.getLinkedProjects);
   isLoading = select(LinkedProjectsSelectors.getLinkedProjectsLoading);
@@ -93,7 +89,7 @@ export class ViewLinkedProjectsComponent {
     getLinkedProjects: GetAllLinkedProjects,
     clearLinkedProjects: ClearLinkedProjects,
     clearProject: ClearProjectOverview,
-    clearRegistration: ClearRegistryOverview,
+    clearRegistration: ClearRegistry,
   });
 
   constructor() {

src/app/features/metadata/components/metadata-affiliated-institutions/metadata-affiliated-institutions.component.html

@@ -1,6 +1,6 @@
 <p-card>
   <div class="flex justify-content-between align-items-center">
-    <h2>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h2>
+    <h2>{{ 'common.labels.affiliatedInstitutions' | translate }}</h2>
 
     @if (!readonly()) {
       <p-button
@@ -13,6 +13,6 @@ <h2>{{ 'project.overview.metadata.affiliatedInstitutions' | translate }}</h2>
   </div>
 
   <div class="mt-4">
-    <osf-affiliated-institutions-view [institutions]="affiliatedInstitutions()" [showTitle]="false" />
+    <osf-affiliated-institutions-view [institutions]="affiliatedInstitutions()" />
   </div>
 </p-card>

src/app/features/my-projects/mappers/index.ts

@@ -28,15 +28,13 @@ import { SearchInputComponent } from '@osf/shared/components/search-input/search
 import { SelectComponent } from '@osf/shared/components/select/select.component';
 import { SubHeaderComponent } from '@osf/shared/components/sub-header/sub-header.component';
 import { DEFAULT_TABLE_PARAMS } from '@osf/shared/constants/default-table-params.constants';
-import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { SortOrder } from '@osf/shared/enums/sort-order.enum';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 import { ProjectRedirectDialogService } from '@osf/shared/services/project-redirect-dialog.service';
-import { BookmarksSelectors, GetBookmarksCollectionId } from '@osf/shared/stores/bookmarks';
+import { BookmarksSelectors, GetAllMyBookmarks, GetBookmarksCollectionId } from '@osf/shared/stores/bookmarks';
 import {
   ClearMyResources,
-  GetMyBookmarks,
   GetMyPreprints,
   GetMyProjects,
   GetMyRegistrations,
@@ -82,7 +80,6 @@ export class MyProjectsComponent implements OnInit {
   readonly queryService = inject(MyProjectsQueryService);
   readonly tableParamsService = inject(MyProjectsTableParamsService);
 
-  readonly bookmarksPageSize = 100;
   readonly isLoading = signal(false);
   readonly isMedium = toSignal(inject(IS_MEDIUM));
   readonly tabOptions = MY_PROJECTS_TABS;
@@ -104,12 +101,13 @@ export class MyProjectsComponent implements OnInit {
   readonly projects = select(MyResourcesSelectors.getProjects);
   readonly registrations = select(MyResourcesSelectors.getRegistrations);
   readonly preprints = select(MyResourcesSelectors.getPreprints);
-  readonly bookmarks = select(MyResourcesSelectors.getBookmarks);
   readonly totalProjectsCount = select(MyResourcesSelectors.getTotalProjects);
   readonly totalRegistrationsCount = select(MyResourcesSelectors.getTotalRegistrations);
   readonly totalPreprintsCount = select(MyResourcesSelectors.getTotalPreprints);
-  readonly totalBookmarksCount = select(MyResourcesSelectors.getTotalBookmarks);
+
+  readonly bookmarks = select(BookmarksSelectors.getBookmarks);
   readonly bookmarksCollectionId = select(BookmarksSelectors.getBookmarksCollectionId);
+  readonly totalBookmarksCount = select(BookmarksSelectors.getBookmarksTotalCount);
   readonly isBookmarks = computed(() => this.selectedTab() === MyProjectsTab.Bookmarks);
 
   readonly actions = createDispatchMap({
@@ -118,7 +116,7 @@ export class MyProjectsComponent implements OnInit {
     getMyProjects: GetMyProjects,
     getMyRegistrations: GetMyRegistrations,
     getMyPreprints: GetMyPreprints,
-    getMyBookmarks: GetMyBookmarks,
+    getMyBookmarks: GetAllMyBookmarks,
   });
 
   constructor() {
@@ -314,13 +312,7 @@ export class MyProjectsComponent implements OnInit {
         break;
       case MyProjectsTab.Bookmarks:
         if (this.bookmarksCollectionId()) {
-          action$ = this.actions.getMyBookmarks(
-            this.bookmarksCollectionId(),
-            pageNumber,
-            this.bookmarksPageSize,
-            filters,
-            ResourceType.Null
-          );
+          action$ = this.actions.getMyBookmarks(this.bookmarksCollectionId(), filters);
         }
         break;
     }

src/app/features/my-projects/my-projects.component.ts

@@ -43,9 +43,8 @@ export class AdditionalInfoComponent {
     if (!preprint) return null;
     return preprint.embeddedLicense;
   });
-  licenseOptionsRecord = computed(() => {
-    return (this.preprint()?.licenseOptions ?? {}) as Record<string, string>;
-  });
+
+  licenseOptionsRecord = computed(() => (this.preprint()?.licenseOptions ?? {}) as Record<string, string>);
 
   skeletonData = Array.from({ length: 5 }, () => null);