fix(ang-905): fixed create component affiliations issue (#547)

Author: rnastyuk

src/app/features/project/overview/components/add-component-dialog/add-component-dialog.component.html

@@ -6,15 +6,16 @@
     <input pInputText id="component-title" type="text" [formControlName]="ComponentFormControls.Title" />
   </div>
 
-  @if (currentProject()?.affiliatedInstitutions?.length) {
+  @if (areUserInstitutionsLoading() || userInstitutions().length) {
     <div>
-      <h3 class="font-normal mb-2">
+      <h3 class="font-normal mbx-2">
         {{ 'myProjects.createProject.affiliation.title' | translate }}
       </h3>
 
       <osf-affiliated-institution-select
-        [institutions]="currentProject()?.affiliatedInstitutions || []"
-        [selectedInstitutions]="currentProject()?.affiliatedInstitutions || []"
+        [institutions]="userInstitutions()"
+        [selectedInstitutions]="userInstitutions()"
+        [isLoading]="areUserInstitutionsLoading()"
         (selectedInstitutionsChange)="setSelectedInstitutions($event)"
       />
     </div>

src/app/features/project/overview/components/add-component-dialog/add-component-dialog.component.ts

@@ -20,6 +20,7 @@ import { CustomValidators } from '@osf/shared/helpers';
 import { ComponentForm, Institution } from '@osf/shared/models';
 import { ToastService } from '@osf/shared/services';
 import { FetchRegions, RegionsSelectors } from '@osf/shared/stores';
+import { FetchUserInstitutions, InstitutionsSelectors } from '@osf/shared/stores/institutions';
 
 import { CreateComponent, GetComponents, ProjectOverviewSelectors } from '../../store';
 
@@ -51,11 +52,14 @@ export class AddComponentDialogComponent implements OnInit {
   currentProject = select(ProjectOverviewSelectors.getProject);
   areRegionsLoading = select(RegionsSelectors.areRegionsLoading);
   isSubmitting = select(ProjectOverviewSelectors.getComponentsSubmitting);
+  userInstitutions = select(InstitutionsSelectors.getUserInstitutions);
+  areUserInstitutionsLoading = select(InstitutionsSelectors.areUserInstitutionsLoading);
 
   actions = createDispatchMap({
     createComponent: CreateComponent,
     getComponents: GetComponents,
     getRegions: FetchRegions,
+    fetchUserInstitutions: FetchUserInstitutions,
   });
 
   componentForm = new FormGroup<ComponentForm>({
@@ -96,6 +100,7 @@ export class AddComponentDialogComponent implements OnInit {
 
   ngOnInit(): void {
     this.actions.getRegions();
+    this.actions.fetchUserInstitutions();
   }
 
   setSelectedInstitutions(institutions: Institution[]) {

src/app/shared/components/affiliated-institution-select/affiliated-institution-select.component.html

@@ -1,5 +1,5 @@
 @if (isLoading()) {
-  <p-skeleton width="100%" height="3rem" />
+  <p-skeleton width="100%" height="3.2rem" />
 } @else {
   <div class="flex flex-column gap-2">
     <div class="relative">